From ac94ae0fdd738b2d1a34d6d749c0545be616e32f Mon Sep 17 00:00:00 2001
From: gorkem-bwl <gorkem.cetin@bluewavelabs.ca>
Date: Thu, 3 Sep 2026 01:24:44 -0400
Subject: [PATCH] fix(client): make 16 the Icon default and size the stragglers

Third time this bug has surfaced, so this fixes the cause. Icon defaulted
to 20px, but 17 call sites already asked for 16 explicitly against 2 for
20, and the sidebar clamps to 16 in CSS - so 16 was the house size and
the 20 default was one nobody chose. Anything bare rendered above the cap
height of the 13px text beside it.

The default is now 16. Five sites that were relying on the old default
and sit next to labels are pinned explicitly anyway (team header, status
page controls, status page delete, theme toggle), and the public status
page's warning icon is pinned at 20 so the default change does not alter
a page users publish.

Sidebar icons are unaffected either way - their CSS already forced 16.

Claude-Session: https://claude.ai/code/session_01AbYLvwpEaZFXktHVcqrFRd
---
 client/src/Components/design-elements/Icon.tsx     |  5 ++++-
 client/src/Components/sidebar/Authfooter.tsx       |  5 ++++-
 .../Account/components/HeaderTeamControls.tsx      | 14 ++++++++++++--
 .../Components/HeaderConfigStatusControls.tsx      |  7 ++++++-
 .../Status/Components/HeaderStatusPageControls.tsx |  7 ++++++-
 .../Status/themes/shared/BaseStatusPage.tsx        |  1 +
 6 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/client/src/Components/design-elements/Icon.tsx b/client/src/Components/design-elements/Icon.tsx
index 95e68826b..3832cb764 100644
--- a/client/src/Components/design-elements/Icon.tsx
+++ b/client/src/Components/design-elements/Icon.tsx
@@ -8,7 +8,10 @@ interface IconProps {
 	color?: string;
 }
 
-const Icon = ({ icon: Icon, size = 20, strokeWidth = 1.5, color }: IconProps) => {
+// 16 is the house size: 17 call sites ask for it explicitly against 2 for 20,
+// and the sidebar clamps to 16 in CSS. A 20px default put icons above the cap
+// height of the 13px text they sit beside.
+const Icon = ({ icon: Icon, size = 16, strokeWidth = 1.5, color }: IconProps) => {
 	return (
 		<Icon
 			size={size}
diff --git a/client/src/Components/sidebar/Authfooter.tsx b/client/src/Components/sidebar/Authfooter.tsx
index 1b68cecc7..54846b6b8 100644
--- a/client/src/Components/sidebar/Authfooter.tsx
+++ b/client/src/Components/sidebar/Authfooter.tsx
@@ -185,7 +185,10 @@ export const AuthFooter = ({ collapsed, accountMenuItems }: AuthFooterProps) =>
 					}}
 					sx={menuItemSx}
 				>
-					<Icon icon={mode === "light" ? Moon : Sun} />
+					<Icon
+						icon={mode === "light" ? Moon : Sun}
+						size={16}
+					/>
 					{mode === "light"
 						? t("pages.settings.form.ui.option.theme.dark")
 						: t("pages.settings.form.ui.option.theme.light")}
diff --git a/client/src/Pages/Account/components/HeaderTeamControls.tsx b/client/src/Pages/Account/components/HeaderTeamControls.tsx
index 51fea25b6..b3c0f3293 100644
--- a/client/src/Pages/Account/components/HeaderTeamControls.tsx
+++ b/client/src/Pages/Account/components/HeaderTeamControls.tsx
@@ -59,7 +59,12 @@ export const HeaderTeamControls = ({
 				<Button
 					variant="contained"
 					color="primary"
-					startIcon={<Icon icon={Mail} />}
+					startIcon={
+						<Icon
+							icon={Mail}
+							size={16}
+						/>
+					}
 					onClick={onInviteClick}
 				>
 					{t("common.buttons.inviteMember")}
@@ -69,7 +74,12 @@ export const HeaderTeamControls = ({
 				<Button
 					variant="contained"
 					color="primary"
-					startIcon={<Icon icon={UserPlus} />}
+					startIcon={
+						<Icon
+							icon={UserPlus}
+							size={16}
+						/>
+					}
 					onClick={onAddMemberClick}
 				>
 					{t("common.buttons.addMember")}
diff --git a/client/src/Pages/StatusPage/Create/Components/HeaderConfigStatusControls.tsx b/client/src/Pages/StatusPage/Create/Components/HeaderConfigStatusControls.tsx
index 407306f1b..f6908c90b 100644
--- a/client/src/Pages/StatusPage/Create/Components/HeaderConfigStatusControls.tsx
+++ b/client/src/Pages/StatusPage/Create/Components/HeaderConfigStatusControls.tsx
@@ -25,7 +25,12 @@ export const HeaderConfigStatusControls = ({
 			<Button
 				variant="contained"
 				color="error"
-				startIcon={<Icon icon={Trash} />}
+				startIcon={
+					<Icon
+						icon={Trash}
+						size={16}
+					/>
+				}
 				onClick={onDelete}
 			>
 				{translate.t("common.buttons.delete")}
diff --git a/client/src/Pages/StatusPage/Status/Components/HeaderStatusPageControls.tsx b/client/src/Pages/StatusPage/Status/Components/HeaderStatusPageControls.tsx
index 93c29d188..1fc25a154 100644
--- a/client/src/Pages/StatusPage/Status/Components/HeaderStatusPageControls.tsx
+++ b/client/src/Pages/StatusPage/Status/Components/HeaderStatusPageControls.tsx
@@ -77,7 +77,12 @@ export const HeaderStatusPageControls = ({
 				<Button
 					variant="contained"
 					color="secondary"
-					startIcon={<Icon icon={Settings} />}
+					startIcon={
+						<Icon
+							icon={Settings}
+							size={16}
+						/>
+					}
 					onClick={() => navigate(`/status/configure/${statusPage.url}`)}
 				>
 					{t("common.buttons.configure")}
diff --git a/client/src/Pages/StatusPage/Status/themes/shared/BaseStatusPage.tsx b/client/src/Pages/StatusPage/Status/themes/shared/BaseStatusPage.tsx
index 807eed742..a355e8774 100644
--- a/client/src/Pages/StatusPage/Status/themes/shared/BaseStatusPage.tsx
+++ b/client/src/Pages/StatusPage/Status/themes/shared/BaseStatusPage.tsx
@@ -211,6 +211,7 @@ export const BaseStatusPage = ({
 							>
 								<Icon
 									icon={TriangleAlert}
+									size={20}
 									color={theme.palette.warning.main}
 								/>
 								<Typography>