Fix top nav buttons overlapping with chat sidebar at narrow screen sizes & both sidebars open

app/components/layout/AnythingAdder.tsx

@@ -22,7 +22,7 @@ import {
 	type SendouMenuItemProps,
 } from "../elements/Menu";
 
-export function AnythingAdder() {
+export function AnythingAdder({ compact }: { compact?: boolean }) {
 	const { t } = useTranslation(["common"]);
 	const user = useUser();
 
@@ -106,9 +106,10 @@ export function AnythingAdder() {
 				<SendouButton
 					size="small"
 					icon={<Plus />}
+					shape={compact ? "square" : undefined}
 					data-testid="anything-adder-menu-button"
 				>
-					{t("common:actions.addNew")}…
+					{compact ? undefined : `${t("common:actions.addNew")}…`}
 				</SendouButton>
 			}
 		>

app/components/layout/TopRightButtons.module.css

@@ -10,9 +10,43 @@
 	}
 }
 
+.supportWrapperCompact {
+	display: none;
+}
+
+.addNewWrapperCompact {
+	display: none;
+}
+
+@media screen and (min-width: 600px) {
+	@container (max-width: 600px) {
+		.supportWrapper {
+			display: none;
+		}
+
+		.supportWrapperCompact {
+			display: block;
+		}
+	}
+
+	@container (max-width: 475px) {
+		.addNewWrapper {
+			display: none;
+		}
+
+		.addNewWrapperCompact {
+			display: block;
+		}
+
+		.searchAndAddContainer {
+			grid-template-columns: 2fr 1fr;
+		}
+	}
+}
+
 .searchAndAddContainer {
 	display: grid;
-	grid-template-columns: 2fr 1fr;
+	grid-template-columns: 2fr max-content;
 	gap: var(--s-2);
 }
 

app/components/layout/TopRightButtons.tsx

@@ -27,16 +27,27 @@ export function TopRightButtons({
 	return (
 		<div className={styles.container}>
 			{showSupport ? (
-				<div className={styles.supportWrapper}>
-					<LinkButton
-						to={SUPPORT_PAGE}
-						size="small"
-						icon={<Heart />}
-						variant="outlined"
-					>
-						{t("common:pages.support")}
-					</LinkButton>
-				</div>
+				<>
+					<div className={styles.supportWrapper}>
+						<LinkButton
+							to={SUPPORT_PAGE}
+							size="small"
+							icon={<Heart />}
+							variant="outlined"
+						>
+							{t("common:pages.support")}
+						</LinkButton>
+					</div>
+					<div className={styles.supportWrapperCompact}>
+						<LinkButton
+							to={SUPPORT_PAGE}
+							size="small"
+							icon={<Heart />}
+							variant="outlined"
+							shape="square"
+						/>
+					</div>
+				</>
 			) : null}
 			{isLoggedIn ? (
 				<>
@@ -49,6 +60,9 @@ export function TopRightButtons({
 						<div className={styles.addNewWrapper}>
 							<AnythingAdder />
 						</div>
+						<div className={styles.addNewWrapperCompact}>
+							<AnythingAdder compact />
+						</div>
 					</div>
 					{onChatToggle ? (
 						<div className={styles.chatButtonWrapperPersistent}>

app/components/layout/index.module.css

@@ -4,6 +4,7 @@
 }
 
 .header {
+	container-type: inline-size;
 	display: flex;
 	width: 100%;
 	height: var(--layout-nav-height);