diff --git a/packages/typescriptlang-org/src/components/layout/TopNav.scss b/packages/typescriptlang-org/src/components/layout/TopNav.scss index 8122362b483b..082c374bf4cd 100644 --- a/packages/typescriptlang-org/src/components/layout/TopNav.scss +++ b/packages/typescriptlang-org/src/components/layout/TopNav.scss @@ -381,6 +381,41 @@ form.search { } } +@media (max-width: 790px) and (max-height: 480px) { + #top-menu { + position: static; + + &.up, + &.down { + transform: none; + } + + form.search { + .algolia-autocomplete { + flex: 1; + min-width: 0; + } + + input { + width: 100%; + } + } + + .ds-dropdown-menu { + top: 100% !important; + right: auto !important; + bottom: auto; + width: calc(100vw - 1rem); + + &:before { + top: -7px; + bottom: auto; + transform: rotate(-45deg); + } + } + } +} + .skip-to-main { clip: rect(1px, 1px, 1px, 1px); height: 1px; diff --git a/packages/typescriptlang-org/src/templates/pages/css/index.scss b/packages/typescriptlang-org/src/templates/pages/css/index.scss index 6476dd5eafbd..eff3c03eb813 100644 --- a/packages/typescriptlang-org/src/templates/pages/css/index.scss +++ b/packages/typescriptlang-org/src/templates/pages/css/index.scss @@ -1265,11 +1265,13 @@ $headline-foreground-bg: white; } } -.cta .cta-back a { +.cta > .transparent-button { position: relative; - top: 20px; - left: 20px; - width: 60px; + top: auto; + left: auto; + display: inline-flex; + align-items: center; + margin-bottom: 1rem; } .transparent-button {