diff --git a/app/components/GearSelect.tsx b/app/components/GearSelect.tsx index 476e4219e..5b210dbd4 100644 --- a/app/components/GearSelect.tsx +++ b/app/components/GearSelect.tsx @@ -47,8 +47,6 @@ export function GearSelect({ search={{ placeholder: t("common:forms.gearSearch.search.placeholder"), }} - className={styles.selectWidthWider} - popoverClassName={styles.selectWidthWider} selectedKey={value} defaultSelectedKey={initialValue} onSelectionChange={(value) => onChange?.(value as any)} diff --git a/app/components/StageSelect.module.css b/app/components/StageSelect.module.css index 8a2ed2ebb..f3c5b340b 100644 --- a/app/components/StageSelect.module.css +++ b/app/components/StageSelect.module.css @@ -1,7 +1,3 @@ -.selectWidthWider { - --select-width: 250px; -} - .item { display: flex; gap: var(--s-2); diff --git a/app/components/StageSelect.tsx b/app/components/StageSelect.tsx index 96bdbb78f..a25dddc68 100644 --- a/app/components/StageSelect.tsx +++ b/app/components/StageSelect.tsx @@ -48,8 +48,6 @@ export function StageSelect({ search={{ placeholder: t("common:forms.stageSearch.search.placeholder"), }} - className={styles.selectWidthWider} - popoverClassName={styles.selectWidthWider} selectedKey={isControlled ? value : undefined} defaultSelectedKey={isControlled ? undefined : (initialValue as Key)} onSelectionChange={handleOnChange} diff --git a/app/components/WeaponSelect.module.css b/app/components/WeaponSelect.module.css index bdb895e8d..f76f663ff 100644 --- a/app/components/WeaponSelect.module.css +++ b/app/components/WeaponSelect.module.css @@ -1,7 +1,3 @@ -.selectWidthWider { - --select-width: 250px; -} - .item { display: flex; gap: var(--s-2); diff --git a/app/components/WeaponSelect.tsx b/app/components/WeaponSelect.tsx index 3d501f2fa..f8f2f433d 100644 --- a/app/components/WeaponSelect.tsx +++ b/app/components/WeaponSelect.tsx @@ -103,8 +103,6 @@ export function WeaponSelect< search={{ placeholder: t("common:forms.weaponSearch.search.placeholder"), }} - className={styles.selectWidthWider} - popoverClassName={styles.selectWidthWider} searchInputValue={filterValue} onSearchInputChange={setFilterValue} selectedKey={isControlled ? keyify(value) : undefined} diff --git a/app/features/components-showcase/components-showcase.module.css b/app/features/components-showcase/components-showcase.module.css index 8e51033ac..8d967ead1 100644 --- a/app/features/components-showcase/components-showcase.module.css +++ b/app/features/components-showcase/components-showcase.module.css @@ -2,7 +2,6 @@ font-size: var(--fonts-xl); border-bottom: 2px solid var(--color-bg-high); margin-bottom: var(--s-4); - scroll-margin-top: var(--sticky-top); } .componentRow { diff --git a/app/features/sendouq-match/routes/q.match.$id.module.css b/app/features/sendouq-match/routes/q.match.$id.module.css index e23c7cd88..ec682953c 100644 --- a/app/features/sendouq-match/routes/q.match.$id.module.css +++ b/app/features/sendouq-match/routes/q.match.$id.module.css @@ -78,7 +78,7 @@ .chatContainer { align-self: flex-start; - top: var(--sticky-top); + top: calc(var(--layout-nav-height) + var(--s-3)); position: sticky; width: 100%; } @@ -87,7 +87,7 @@ display: flex; flex-direction: column; align-self: flex-start; - top: var(--sticky-top); + top: calc(var(--layout-nav-height) + var(--s-3)); position: sticky; } diff --git a/app/features/tournament/tournament.module.css b/app/features/tournament/tournament.module.css index 3e25f262b..15670ec44 100644 --- a/app/features/tournament/tournament.module.css +++ b/app/features/tournament/tournament.module.css @@ -5,7 +5,7 @@ } .chatContainer { - top: var(--sticky-top); + top: calc(var(--layout-nav-height) + var(--s-3)); position: sticky; width: 100%; } diff --git a/app/styles/vars.css b/app/styles/vars.css index 8b56ed77f..37c175b9d 100644 --- a/app/styles/vars.css +++ b/app/styles/vars.css @@ -196,13 +196,7 @@ html { --s-40: 10rem; --s-48: 12rem; - --input-width-extra-small: 10rem; - --input-width-small: 12rem; - --input-width-medium: 18rem; - --label-margin: var(--s-1); - --select-width: 225px; - --sticky-top: 60px; } /* xs: "(min-width: 480px)",