From 634e2521b09d6ab7dec27e3e8431d21eebb99c12 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sun, 6 Sep 2026 20:46:34 +0300
Subject: [PATCH] Fix AnythingAdder button width on narrower screens

---
 .../layout/AnythingAdder.module.css           | 22 -------------------
 app/components/layout/AnythingAdder.tsx       |  6 +----
 .../layout/TopRightButtons.module.css         | 14 +-----------
 changelog/2026-09-06-add-new-button-width.md  |  4 ++++
 4 files changed, 6 insertions(+), 40 deletions(-)
 delete mode 100644 app/components/layout/AnythingAdder.module.css
 create mode 100644 changelog/2026-09-06-add-new-button-width.md

diff --git a/app/components/layout/AnythingAdder.module.css b/app/components/layout/AnythingAdder.module.css
deleted file mode 100644
index d876ede84..000000000
--- a/app/components/layout/AnythingAdder.module.css
+++ /dev/null
@@ -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;
-		}
-	}
-}
diff --git a/app/components/layout/AnythingAdder.tsx b/app/components/layout/AnythingAdder.tsx
index d8685a51c..8583f006d 100644
--- a/app/components/layout/AnythingAdder.tsx
+++ b/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>
 			}
 		>
diff --git a/app/components/layout/TopRightButtons.module.css b/app/components/layout/TopRightButtons.module.css
index f35f6b7f4..c9b831a57 100644
--- a/app/components/layout/TopRightButtons.module.css
+++ b/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;
-	}
-}
diff --git a/changelog/2026-09-06-add-new-button-width.md b/changelog/2026-09-06-add-new-button-width.md
new file mode 100644
index 000000000..b9ae4cbc2
--- /dev/null
+++ b/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