Skip to content

Fix scroll and Tailwind style for version selector #1405

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sfc-gh-dmatthews wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix scroll and Tailwind style for version selector #1405

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 16 additions & 33 deletions components/utilities/versionSelector.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,9 @@
.Container {
@apply flex items-center gap-2 mb-4 z-dropdown;
/* Sticky positioning - stays in place as you scroll */
position: sticky;
top: 0.5rem;
width: fit-content;
align-self: flex-start;
}

/* On mobile, hide this - we'll show a separate one in header */
@media (max-width: 1023px) {
.Container {
@apply hidden;
}
/* Hidden on mobile (< lg breakpoint) - we show a separate one in header */
@apply flex items-center gap-2 mb-4 z-dropdown;
@apply sticky top-2 w-fit self-start;
@apply hidden lg:flex;
}

.Prefix {
Expand Down Expand Up @@ -51,34 +43,31 @@

/* Arrow indicator - using material icon for consistency */
.Arrow {
@apply ml-0.5 transition-transform duration-150 text-gray-70;
font-size: 1.125rem;
@apply ml-0.5 transition-transform duration-150 text-gray-70 text-lg;
}

:global(.dark) .Arrow {
@apply text-gray-50;
}

.ArrowOpen {
transform: rotate(180deg);
@apply rotate-180;
}

/* Dropdown menu - solid background matching site */
.DropdownMenu {
@apply absolute top-full left-0 mt-1 rounded-md list-none m-0 min-w-full z-dropdown;
@apply bg-white border-none;
padding: 0.375rem 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
@apply bg-white border-none max-h-[60vh] overflow-y-auto;
@apply py-1.5 shadow-[0_4px_12px_rgba(0,0,0,0.15)];
}

:global(.dark) .DropdownMenu {
@apply bg-gray-100 border border-gray-80;
box-shadow: none;
@apply bg-gray-100 border border-gray-80 shadow-none;
}

.DropdownItem {
@apply pl-3 pr-2 text-sm cursor-pointer text-gray-90 flex items-center justify-between gap-2 whitespace-nowrap mb-1;
padding-top: 0.2rem;
@apply pl-3 pr-2 pt-[0.2rem] text-sm cursor-pointer text-gray-90;
@apply flex items-center justify-between gap-2 whitespace-nowrap mb-1;
}

.DropdownItem:hover {
Expand All @@ -103,7 +92,6 @@

.CheckIcon {
@apply text-base text-gray-70 leading-none;
font-size: 1rem;
}

:global(.dark) .CheckIcon {
Expand Down Expand Up @@ -135,19 +123,14 @@

/* Warning icon - circular like the Warning block (bg-orange-70) */
.WarningIcon {
@apply text-xs rounded-full bg-orange-70 flex-shrink-0 w-4 h-4 flex items-center justify-center leading-none pl-px;
color: white !important; /* Override header icon color rule */
/* !text-white overrides header icon color rule */
@apply text-xs rounded-full bg-orange-70 flex-shrink-0 w-4 h-4;
@apply flex items-center justify-center leading-none pl-px !text-white;
}

/* Mobile version selector - shown in header */
/* Mobile version selector - shown in header, hidden on lg+ */
.MobileContainer {
@apply hidden items-center gap-2 mr-4;
}

@media (max-width: 1023px) {
.MobileContainer {
@apply flex;
}
@apply flex items-center gap-2 mr-4 lg:hidden;
}

.MobileContainer .Prefix {
Expand Down