Improve tabs

app/components/elements/Tabs.module.css

@@ -1,8 +1,14 @@
+.tabListContainer {
+	overflow-x: auto;
+	overflow-y: hidden;
+	padding-bottom: var(--s-1);
+}
+
 .tabList {
 	display: flex;
 	flex-direction: row;
 	border-bottom: 2px solid var(--color-border);
-	overflow-x: visible;
+	min-width: fit-content;
 }
 
 .tabList svg {
@@ -22,14 +28,19 @@
 	padding-block-start: var(--s-4);
 }
 
-.disappearing:has(.tabList .tabButton:only-child).padded .tabPanel {
+.disappearing:has(.tabList > div:only-child).padded .tabPanel {
 	padding-top: 0;
 }
 
-.disappearing .tabList:has(.tabButton:only-child) {
+.disappearing .tabList:has(> div:only-child) {
 	display: none;
 }
 
+.tabContainer {
+	min-width: fit-content;
+	margin-bottom: -2px;
+}
+
 .tabButton {
 	background-color: transparent;
 	border: none;
@@ -40,21 +51,20 @@
 	white-space: nowrap;
 	flex: 1;
 	transform: none !important;
-	margin-bottom: -2px;
 }
 
-.tabButton[data-selected] {
+.tabContainer[data-selected] .tabButton {
 	border-color: var(--color-text-accent);
 	color: var(--color-text);
 }
 
-.tabButton[data-focus-visible] {
-	color: var(--color-accent) !important;
+.tabContainer[data-focus-visible] .tabButton {
+	color: var(--color-text-accent) !important;
 	outline: none;
 }
 
 .tabNumber {
-	color: var(--color-accent);
+	color: var(--color-text-accent);
 	margin-inline-start: var(--s-2);
 }
 

app/components/elements/Tabs.tsx

@@ -73,37 +73,37 @@ interface SendouTabProps extends TabProps {
 
 export function SendouTab({ icon, children, number, ...rest }: SendouTabProps) {
 	return (
-		<Tab className={clsx(buttonStyles.button, styles.tabButton)} {...rest}>
-			{icon}
-			{children}
-			{typeof number === "number" && number !== 0 && (
-				<span className={styles.tabNumber}>{number}</span>
-			)}
+		<Tab className={styles.tabContainer} {...rest}>
+			<div className={clsx(buttonStyles.button, styles.tabButton)}>
+				{icon}
+				{children}
+				{typeof number === "number" && number !== 0 && (
+					<span className={styles.tabNumber}>{number}</span>
+				)}
+			</div>
 		</Tab>
 	);
 }
 
 interface SendouTabListProps<T extends object> extends TabListProps<T> {
-	/** Should overflow-x: auto CSS rule be applied? Defaults to true */
-	scrolling?: boolean;
 	sticky?: boolean;
 }
 
 export function SendouTabList<T extends object>({
-	scrolling = true,
 	sticky,
 	...rest
 }: SendouTabListProps<T>) {
 	return (
-		<TabList
-			className={clsx(styles.tabList, {
-				"overflow-x-auto": scrolling,
-				// invisible: cantSwitchTabs && !disappearing,
-				// hidden: cantSwitchTabs && disappearing,
-				[styles.sticky]: sticky,
-			})}
-			{...rest}
-		/>
+		<div className={clsx(styles.tabListContainer, "scrollbar")}>
+			<TabList
+				className={clsx(styles.tabList, {
+					// invisible: cantSwitchTabs && !disappearing,
+					// hidden: cantSwitchTabs && disappearing,
+					[styles.sticky]: sticky,
+				})}
+				{...rest}
+			/>
+		</div>
 	);
 }
 

app/features/sendouq/routes/q.looking.tsx

@@ -342,7 +342,7 @@ function Groups() {
 				) : null}
 				<div className="q__groups-inner-container">
 					<SendouTabs>
-						<SendouTabList scrolling={isMobile}>
+						<SendouTabList>
 							<SendouTab id="groups" number={data.groups.neutral.length}>
 								{t("q:looking.columns.groups")}
 							</SendouTab>