Fix AnythingAdder button width on narrower screens

app/components/layout/AnythingAdder.module.css

@@ -1,22 +0,0 @@
-.button {
-	width: 100%;
-}
-
-/* in a narrow header only the plus fits, like the search button next to it */
-@media screen and (min-width: 600px) {
-	@container (max-width: 475px) {
-		.button {
-			width: auto;
-			aspect-ratio: 1 / 1;
-			padding: 0;
-
-			& svg {
-				margin-inline-end: 0;
-			}
-		}
-
-		.label {
-			display: none;
-		}
-	}
-}

app/components/layout/AnythingAdder.tsx

@@ -23,7 +23,6 @@ import {
 	SendouMenuItem,
 	type SendouMenuItemProps,
 } from "../elements/Menu";
-import styles from "./AnythingAdder.module.css";
 
 export function AnythingAdder() {
 	const { t } = useTranslation(["common"]);
@@ -118,12 +117,9 @@ export function AnythingAdder() {
 				<SendouButton
 					size="small"
 					icon={<Plus />}
-					className={styles.button}
 					data-testid="anything-adder-menu-button"
 				>
-					<span
-						className={styles.label}
-					>{`${t("common:actions.addNew")}…`}</span>
+					{`${t("common:actions.addNew")}…`}
 				</SendouButton>
 			}
 		>

app/components/layout/TopRightButtons.module.css

@@ -24,17 +24,11 @@
 			display: block;
 		}
 	}
-
-	@container (max-width: 475px) {
-		.searchAndAddContainer {
-			grid-template-columns: 2fr 1fr;
-		}
-	}
 }
 
 .searchAndAddContainer {
 	display: grid;
-	grid-template-columns: 2fr max-content;
+	grid-template-columns: 1fr max-content;
 	gap: var(--s-2);
 }
 
@@ -84,9 +78,3 @@
 	place-items: center;
 	pointer-events: none;
 }
-
-@media screen and (max-width: 1000px) {
-	.searchAndAddContainer {
-		grid-template-columns: 1fr 1fr;
-	}
-}

changelog/2026-09-06-add-new-button-width.md

@@ -0,0 +1,4 @@
+---
+type: bug
+---
+"Add new…" button in the header no longer stretches wider on narrower screens