From 07c4aa1c28071f137c179fa12a1a768ab308fe93 Mon Sep 17 00:00:00 2001
From: Forbes <forbes@kindred-systems.com>
Date: Fri, 13 Feb 2026 14:37:40 -0600
Subject: [PATCH] fix(web): align spacing values to style guide grid (#71)

- Replace 0.3rem padding/margin/gap with 0.25rem (xs)
- Replace 0.2rem margins with 0.25rem (xs)
- Replace 0.1rem padding with 0.15rem (badge spec)
- Replace 0.6rem margins/padding with 0.5rem (sm)
- Fix borderRadius 0.3rem to 0.375rem (6px per style guide)
- Preserve style-guide-specified values: 0.35rem button gap, 0.4rem cell padding, 0.45rem input padding
---
 web/src/components/AppShell.tsx               |  4 ++--
 web/src/components/TagInput.tsx               | 10 +++++-----
 web/src/components/audit/AuditDetailPanel.tsx | 12 ++++++------
 web/src/components/items/BOMTab.tsx           | 18 +++++++++---------
 web/src/components/items/CategoryPicker.tsx   |  6 +++---
 web/src/components/items/CreateItemPane.tsx   | 12 ++++++------
 web/src/components/items/DeleteItemPane.tsx   |  4 ++--
 web/src/components/items/EditItemPane.tsx     | 12 ++++++------
 web/src/components/items/FileDropZone.tsx     |  6 +++---
 web/src/components/items/ImportItemsPane.tsx  |  6 +++---
 web/src/components/items/ItemDetail.tsx       |  4 ++--
 web/src/components/items/ItemTable.tsx        |  2 +-
 web/src/components/items/MainTab.tsx          | 16 ++++++++--------
 web/src/components/items/PropertiesTab.tsx    | 10 +++++-----
 web/src/components/items/RevisionsTab.tsx     | 10 +++++-----
 web/src/components/items/WhereUsedTab.tsx     |  2 +-
 web/src/pages/ProjectsPage.tsx                |  2 +-
 web/src/pages/SchemasPage.tsx                 |  6 +++---
 web/src/pages/SettingsPage.tsx                |  6 +++---
 19 files changed, 74 insertions(+), 74 deletions(-)

diff --git a/web/src/components/AppShell.tsx b/web/src/components/AppShell.tsx
index c81dabd..843bc68 100644
--- a/web/src/components/AppShell.tsx
+++ b/web/src/components/AppShell.tsx
@@ -113,9 +113,9 @@ export function AppShell() {
               onClick={toggleDensity}
               title={`Switch to ${density === "comfortable" ? "compact" : "comfortable"} view`}
               style={{
-                padding: "0.2rem 0.5rem",
+                padding: "0.25rem 0.5rem",
                 fontSize: "var(--font-sm)",
-                borderRadius: "0.3rem",
+                borderRadius: "0.375rem",
                 cursor: "pointer",
                 border: "1px solid var(--ctp-surface1)",
                 background: "var(--ctp-surface0)",
diff --git a/web/src/components/TagInput.tsx b/web/src/components/TagInput.tsx
index 2da2439..39b3322 100644
--- a/web/src/components/TagInput.tsx
+++ b/web/src/components/TagInput.tsx
@@ -124,7 +124,7 @@ export function TagInput({
           padding: "0.25rem 0.5rem",
           backgroundColor: "var(--ctp-base)",
           border: "1px solid var(--ctp-surface1)",
-          borderRadius: "0.3rem",
+          borderRadius: "0.375rem",
           cursor: "text",
           minHeight: "1.8rem",
         }}
@@ -137,7 +137,7 @@ export function TagInput({
               display: "inline-flex",
               alignItems: "center",
               gap: "0.25rem",
-              padding: "0.1rem 0.5rem",
+              padding: "0.15rem 0.5rem",
               borderRadius: "1rem",
               backgroundColor: "rgba(203,166,247,0.15)",
               color: "var(--ctp-mauve)",
@@ -187,7 +187,7 @@ export function TagInput({
             background: "transparent",
             color: "var(--ctp-text)",
             fontSize: "var(--font-body)",
-            padding: "0.1rem 0",
+            padding: "0.15rem 0",
           }}
         />
       </div>
@@ -199,10 +199,10 @@ export function TagInput({
             left: 0,
             right: 0,
             zIndex: 10,
-            marginTop: "0.2rem",
+            marginTop: "0.25rem",
             backgroundColor: "var(--ctp-surface0)",
             border: "1px solid var(--ctp-surface1)",
-            borderRadius: "0.3rem",
+            borderRadius: "0.375rem",
             maxHeight: "160px",
             overflowY: "auto",
           }}
diff --git a/web/src/components/audit/AuditDetailPanel.tsx b/web/src/components/audit/AuditDetailPanel.tsx
index f87df62..6e013c6 100644
--- a/web/src/components/audit/AuditDetailPanel.tsx
+++ b/web/src/components/audit/AuditDetailPanel.tsx
@@ -361,7 +361,7 @@ function FieldGroup({
     <div style={{ marginBottom: "0.75rem" }}>
       <div
         style={{
-          padding: "0.3rem 1rem",
+          padding: "0.25rem 1rem",
           fontSize: "var(--font-sm)",
           fontWeight: 600,
           textTransform: "uppercase",
@@ -424,7 +424,7 @@ function FieldRow({
       style={{
         display: "flex",
         alignItems: "center",
-        padding: "0.3rem 1rem",
+        padding: "0.25rem 1rem",
         borderLeft: `3px solid ${borderColor}`,
         marginLeft: "0.5rem",
         gap: "0.5rem",
@@ -477,10 +477,10 @@ function FieldRow({
           placeholder="---"
           style={{
             flex: 1,
-            padding: "0.2rem 0.4rem",
+            padding: "0.25rem 0.4rem",
             fontSize: "var(--font-table)",
             border: "1px solid var(--ctp-surface1)",
-            borderRadius: "0.3rem",
+            borderRadius: "0.375rem",
             backgroundColor: "var(--ctp-surface0)",
             color: "var(--ctp-text)",
             outline: "none",
@@ -492,10 +492,10 @@ function FieldRow({
 }
 
 const closeBtnStyle: React.CSSProperties = {
-  padding: "0.2rem 0.5rem",
+  padding: "0.25rem 0.5rem",
   fontSize: "var(--font-table)",
   border: "none",
-  borderRadius: "0.3rem",
+  borderRadius: "0.375rem",
   backgroundColor: "var(--ctp-surface1)",
   color: "var(--ctp-subtext1)",
   cursor: "pointer",
diff --git a/web/src/components/items/BOMTab.tsx b/web/src/components/items/BOMTab.tsx
index a31892f..fc1090c 100644
--- a/web/src/components/items/BOMTab.tsx
+++ b/web/src/components/items/BOMTab.tsx
@@ -118,11 +118,11 @@ export function BOMTab({ partNumber, isEditor }: BOMTabProps) {
   };
 
   const inputStyle: React.CSSProperties = {
-    padding: "0.2rem 0.4rem",
+    padding: "0.25rem 0.4rem",
     fontSize: "var(--font-table)",
     backgroundColor: "var(--ctp-base)",
     border: "1px solid var(--ctp-surface1)",
-    borderRadius: "0.3rem",
+    borderRadius: "0.375rem",
     color: "var(--ctp-text)",
     width: "100%",
   };
@@ -267,9 +267,9 @@ export function BOMTab({ partNumber, isEditor }: BOMTabProps) {
       {isEditor && assemblyCount > 0 && (
         <div
           style={{
-            padding: "0.35rem 0.6rem",
+            padding: "0.35rem 0.5rem",
             marginBottom: "0.5rem",
-            borderRadius: "0.3rem",
+            borderRadius: "0.375rem",
             backgroundColor: "rgba(148,226,213,0.1)",
             border: "1px solid rgba(148,226,213,0.3)",
             fontSize: "0.75rem",
@@ -416,7 +416,7 @@ export function BOMTab({ partNumber, isEditor }: BOMTabProps) {
 }
 
 const thStyle: React.CSSProperties = {
-  padding: "0.3rem 0.5rem",
+  padding: "0.25rem 0.5rem",
   textAlign: "left",
   borderBottom: "1px solid var(--ctp-surface1)",
   color: "var(--ctp-overlay1)",
@@ -451,12 +451,12 @@ const actionBtnStyle: React.CSSProperties = {
   cursor: "pointer",
   fontSize: "0.75rem",
   fontWeight: 500,
-  padding: "0.1rem 0.3rem",
+  padding: "0.15rem 0.25rem",
   borderRadius: "0.375rem",
 };
 
 const saveBtnStyle: React.CSSProperties = {
-  padding: "0.2rem 0.4rem",
+  padding: "0.25rem 0.4rem",
   fontSize: "0.75rem",
   fontWeight: 500,
   border: "none",
@@ -468,7 +468,7 @@ const saveBtnStyle: React.CSSProperties = {
 };
 
 const sourceBadgeBase: React.CSSProperties = {
-  padding: "0.1rem 0.4rem",
+  padding: "0.15rem 0.4rem",
   borderRadius: "1rem",
   fontSize: "var(--font-sm)",
   fontWeight: 500,
@@ -487,7 +487,7 @@ const manualBadge: React.CSSProperties = {
 };
 
 const cancelBtnStyle: React.CSSProperties = {
-  padding: "0.2rem 0.4rem",
+  padding: "0.25rem 0.4rem",
   fontSize: "0.75rem",
   fontWeight: 500,
   border: "none",
diff --git a/web/src/components/items/CategoryPicker.tsx b/web/src/components/items/CategoryPicker.tsx
index 5630ef4..826021d 100644
--- a/web/src/components/items/CategoryPicker.tsx
+++ b/web/src/components/items/CategoryPicker.tsx
@@ -95,7 +95,7 @@ export function CategoryPicker({
                     }
                   }}
                   style={{
-                    padding: "0.2rem 0.5rem",
+                    padding: "0.25rem 0.5rem",
                     fontSize: "0.75rem",
                     fontWeight: 500,
                     border: "none",
@@ -180,7 +180,7 @@ export function CategoryPicker({
                   display: "flex",
                   alignItems: "center",
                   gap: "0.5rem",
-                  padding: "0.3rem 0.5rem",
+                  padding: "0.25rem 0.5rem",
                   cursor: "pointer",
                   fontSize: "var(--font-table)",
                   backgroundColor: isSelected
@@ -228,7 +228,7 @@ export function CategoryPicker({
       {value && categories[value] && (
         <div
           style={{
-            padding: "0.3rem 0.5rem",
+            padding: "0.25rem 0.5rem",
             fontSize: "0.75rem",
             color: "var(--ctp-subtext0)",
             borderTop: "1px solid var(--ctp-surface0)",
diff --git a/web/src/components/items/CreateItemPane.tsx b/web/src/components/items/CreateItemPane.tsx
index f45e523..7a8c008 100644
--- a/web/src/components/items/CreateItemPane.tsx
+++ b/web/src/components/items/CreateItemPane.tsx
@@ -653,13 +653,13 @@ function FormGroup({
   children: React.ReactNode;
 }) {
   return (
-    <div style={{ marginBottom: "0.6rem" }}>
+    <div style={{ marginBottom: "0.5rem" }}>
       <label
         style={{
           display: "block",
           fontSize: "0.75rem",
           color: "var(--ctp-subtext0)",
-          marginBottom: "0.2rem",
+          marginBottom: "0.25rem",
         }}
       >
         {label}
@@ -682,7 +682,7 @@ const headerStyle: React.CSSProperties = {
 };
 
 const actionBtnStyle: React.CSSProperties = {
-  padding: "0.3rem 0.75rem",
+  padding: "0.25rem 0.75rem",
   fontSize: "0.75rem",
   fontWeight: 500,
   border: "none",
@@ -698,7 +698,7 @@ const cancelBtnStyle: React.CSSProperties = {
   color: "var(--ctp-subtext1)",
   fontSize: "0.75rem",
   fontWeight: 500,
-  padding: "0.2rem 0.4rem",
+  padding: "0.25rem 0.4rem",
   borderRadius: "0.375rem",
 };
 
@@ -708,7 +708,7 @@ const inputStyle: React.CSSProperties = {
   fontSize: "var(--font-body)",
   backgroundColor: "var(--ctp-base)",
   border: "1px solid var(--ctp-surface1)",
-  borderRadius: "0.3rem",
+  borderRadius: "0.375rem",
   color: "var(--ctp-text)",
   boxSizing: "border-box",
 };
@@ -723,7 +723,7 @@ const errorStyle: React.CSSProperties = {
   color: "var(--ctp-red)",
   backgroundColor: "rgba(243,139,168,0.1)",
   padding: "0.5rem",
-  borderRadius: "0.3rem",
+  borderRadius: "0.375rem",
   marginBottom: "0.5rem",
   fontSize: "var(--font-body)",
 };
diff --git a/web/src/components/items/DeleteItemPane.tsx b/web/src/components/items/DeleteItemPane.tsx
index 93800be..99e4711 100644
--- a/web/src/components/items/DeleteItemPane.tsx
+++ b/web/src/components/items/DeleteItemPane.tsx
@@ -73,7 +73,7 @@ export function DeleteItemPane({
               color: "var(--ctp-red)",
               backgroundColor: "rgba(243,139,168,0.1)",
               padding: "0.5rem 1rem",
-              borderRadius: "0.3rem",
+              borderRadius: "0.375rem",
               fontSize: "var(--font-body)",
               width: "100%",
               textAlign: "center",
@@ -163,6 +163,6 @@ const headerBtnStyle: React.CSSProperties = {
   color: "var(--ctp-subtext1)",
   fontSize: "0.75rem",
   fontWeight: 500,
-  padding: "0.2rem 0.4rem",
+  padding: "0.25rem 0.4rem",
   borderRadius: "0.375rem",
 };
diff --git a/web/src/components/items/EditItemPane.tsx b/web/src/components/items/EditItemPane.tsx
index 39facf0..5f6fa7e 100644
--- a/web/src/components/items/EditItemPane.tsx
+++ b/web/src/components/items/EditItemPane.tsx
@@ -89,7 +89,7 @@ export function EditItemPane({
           onClick={() => void handleSave()}
           disabled={saving}
           style={{
-            padding: "0.3rem 0.75rem",
+            padding: "0.25rem 0.75rem",
             fontSize: "0.75rem",
             fontWeight: 500,
             border: "none",
@@ -114,7 +114,7 @@ export function EditItemPane({
               color: "var(--ctp-red)",
               backgroundColor: "rgba(243,139,168,0.1)",
               padding: "0.5rem",
-              borderRadius: "0.3rem",
+              borderRadius: "0.375rem",
               marginBottom: "0.5rem",
               fontSize: "var(--font-body)",
             }}
@@ -190,13 +190,13 @@ function FormGroup({
   children: React.ReactNode;
 }) {
   return (
-    <div style={{ marginBottom: "0.6rem" }}>
+    <div style={{ marginBottom: "0.5rem" }}>
       <label
         style={{
           display: "block",
           fontSize: "0.75rem",
           color: "var(--ctp-subtext0)",
-          marginBottom: "0.2rem",
+          marginBottom: "0.25rem",
         }}
       >
         {label}
@@ -212,7 +212,7 @@ const inputStyle: React.CSSProperties = {
   fontSize: "var(--font-body)",
   backgroundColor: "var(--ctp-base)",
   border: "1px solid var(--ctp-surface1)",
-  borderRadius: "0.3rem",
+  borderRadius: "0.375rem",
   color: "var(--ctp-text)",
 };
 
@@ -223,6 +223,6 @@ const headerBtnStyle: React.CSSProperties = {
   color: "var(--ctp-subtext1)",
   fontSize: "0.75rem",
   fontWeight: 500,
-  padding: "0.2rem 0.4rem",
+  padding: "0.25rem 0.4rem",
   borderRadius: "0.375rem",
 };
diff --git a/web/src/components/items/FileDropZone.tsx b/web/src/components/items/FileDropZone.tsx
index 59018f6..a327796 100644
--- a/web/src/components/items/FileDropZone.tsx
+++ b/web/src/components/items/FileDropZone.tsx
@@ -143,8 +143,8 @@ function FileRow({
         display: "flex",
         alignItems: "center",
         gap: "0.5rem",
-        padding: "0.3rem 0.4rem",
-        borderRadius: "0.3rem",
+        padding: "0.25rem 0.4rem",
+        borderRadius: "0.375rem",
         position: "relative",
       }}
     >
@@ -153,7 +153,7 @@ function FileRow({
         style={{
           width: 28,
           height: 28,
-          borderRadius: "0.3rem",
+          borderRadius: "0.375rem",
           backgroundColor: color,
           opacity: 0.8,
           display: "flex",
diff --git a/web/src/components/items/ImportItemsPane.tsx b/web/src/components/items/ImportItemsPane.tsx
index b3abe89..726509f 100644
--- a/web/src/components/items/ImportItemsPane.tsx
+++ b/web/src/components/items/ImportItemsPane.tsx
@@ -90,7 +90,7 @@ export function ImportItemsPane({
               color: "var(--ctp-red)",
               backgroundColor: "rgba(243,139,168,0.1)",
               padding: "0.5rem",
-              borderRadius: "0.3rem",
+              borderRadius: "0.375rem",
               marginBottom: "0.5rem",
               fontSize: "var(--font-body)",
             }}
@@ -262,7 +262,7 @@ export function ImportItemsPane({
                     style={{
                       color: "var(--ctp-red)",
                       fontSize: "0.75rem",
-                      padding: "0.1rem 0",
+                      padding: "0.15rem 0",
                     }}
                   >
                     Row {err.row}
@@ -296,6 +296,6 @@ const headerBtnStyle: React.CSSProperties = {
   color: "var(--ctp-subtext1)",
   fontSize: "0.75rem",
   fontWeight: 500,
-  padding: "0.2rem 0.4rem",
+  padding: "0.25rem 0.4rem",
   borderRadius: "0.375rem",
 };
diff --git a/web/src/components/items/ItemDetail.tsx b/web/src/components/items/ItemDetail.tsx
index 8ac2baa..8c2d640 100644
--- a/web/src/components/items/ItemDetail.tsx
+++ b/web/src/components/items/ItemDetail.tsx
@@ -103,7 +103,7 @@ export function ItemDetail({
         </span>
         <span
           style={{
-            padding: "0.1rem 0.5rem",
+            padding: "0.15rem 0.5rem",
             borderRadius: "1rem",
             fontSize: "var(--font-sm)",
             fontWeight: 500,
@@ -205,5 +205,5 @@ const headerBtnStyle: React.CSSProperties = {
   cursor: "pointer",
   color: "var(--ctp-subtext1)",
   fontSize: "var(--font-table)",
-  padding: "0.2rem 0.4rem",
+  padding: "0.25rem 0.4rem",
 };
diff --git a/web/src/components/items/ItemTable.tsx b/web/src/components/items/ItemTable.tsx
index 5f7b56d..6caabbe 100644
--- a/web/src/components/items/ItemTable.tsx
+++ b/web/src/components/items/ItemTable.tsx
@@ -268,7 +268,7 @@ export function ItemTable({
                           <td key={col.key} style={tdStyle}>
                             <span
                               style={{
-                                padding: "0.1rem 0.5rem",
+                                padding: "0.15rem 0.5rem",
                                 borderRadius: "1rem",
                                 fontSize: "0.75rem",
                                 fontWeight: 500,
diff --git a/web/src/components/items/MainTab.tsx b/web/src/components/items/MainTab.tsx
index efe3503..57a6798 100644
--- a/web/src/components/items/MainTab.tsx
+++ b/web/src/components/items/MainTab.tsx
@@ -84,7 +84,7 @@ export function MainTab({ item, onReload, isEditor }: MainTabProps) {
       style={{
         display: "flex",
         gap: "1rem",
-        padding: "0.3rem 0",
+        padding: "0.25rem 0",
         fontSize: "var(--font-body)",
       }}
     >
@@ -177,7 +177,7 @@ export function MainTab({ item, onReload, isEditor }: MainTabProps) {
                 display: "inline-flex",
                 alignItems: "center",
                 gap: "0.25rem",
-                padding: "0.1rem 0.5rem",
+                padding: "0.15rem 0.5rem",
                 borderRadius: "1rem",
                 backgroundColor: "rgba(203,166,247,0.15)",
                 color: "var(--ctp-mauve)",
@@ -208,11 +208,11 @@ export function MainTab({ item, onReload, isEditor }: MainTabProps) {
                 value={addProject}
                 onChange={(e) => setAddProject(e.target.value)}
                 style={{
-                  padding: "0.1rem 0.3rem",
+                  padding: "0.15rem 0.25rem",
                   fontSize: "0.75rem",
                   backgroundColor: "var(--ctp-surface0)",
                   border: "1px solid var(--ctp-surface1)",
-                  borderRadius: "0.3rem",
+                  borderRadius: "0.375rem",
                   color: "var(--ctp-text)",
                 }}
               >
@@ -229,12 +229,12 @@ export function MainTab({ item, onReload, isEditor }: MainTabProps) {
                 <button
                   onClick={() => void handleAddProject()}
                   style={{
-                    padding: "0.1rem 0.4rem",
+                    padding: "0.15rem 0.4rem",
                     fontSize: "var(--font-sm)",
                     border: "none",
                     backgroundColor: "var(--ctp-mauve)",
                     color: "var(--ctp-crust)",
-                    borderRadius: "0.3rem",
+                    borderRadius: "0.375rem",
                     cursor: "pointer",
                   }}
                 >
@@ -293,12 +293,12 @@ export function MainTab({ item, onReload, isEditor }: MainTabProps) {
                 window.location.href = `/api/items/${encodeURIComponent(item.part_number)}/file/${latestRev.revision_number}`;
               }}
               style={{
-                padding: "0.2rem 0.5rem",
+                padding: "0.25rem 0.5rem",
                 fontSize: "var(--font-table)",
                 border: "none",
                 backgroundColor: "var(--ctp-surface1)",
                 color: "var(--ctp-text)",
-                borderRadius: "0.3rem",
+                borderRadius: "0.375rem",
                 cursor: "pointer",
               }}
             >
diff --git a/web/src/components/items/PropertiesTab.tsx b/web/src/components/items/PropertiesTab.tsx
index 5136a7b..0b0bbb7 100644
--- a/web/src/components/items/PropertiesTab.tsx
+++ b/web/src/components/items/PropertiesTab.tsx
@@ -129,7 +129,7 @@ export function PropertiesTab({
     fontSize: "var(--font-table)",
     backgroundColor: "var(--ctp-base)",
     border: "1px solid var(--ctp-surface1)",
-    borderRadius: "0.3rem",
+    borderRadius: "0.375rem",
     color: "var(--ctp-text)",
   };
 
@@ -162,10 +162,10 @@ export function PropertiesTab({
             onClick={() => void handleSave()}
             disabled={saving}
             style={{
-              padding: "0.3rem 0.75rem",
+              padding: "0.25rem 0.75rem",
               fontSize: "var(--font-table)",
               border: "none",
-              borderRadius: "0.3rem",
+              borderRadius: "0.375rem",
               backgroundColor: "var(--ctp-mauve)",
               color: "var(--ctp-crust)",
               cursor: "pointer",
@@ -184,7 +184,7 @@ export function PropertiesTab({
               key={idx}
               style={{
                 display: "flex",
-                gap: "0.3rem",
+                gap: "0.25rem",
                 marginBottom: "0.25rem",
                 alignItems: "center",
               }}
@@ -300,7 +300,7 @@ const tabBtn: React.CSSProperties = {
   padding: "0.25rem 0.5rem",
   fontSize: "var(--font-table)",
   border: "none",
-  borderRadius: "0.3rem",
+  borderRadius: "0.375rem",
   backgroundColor: "var(--ctp-surface0)",
   color: "var(--ctp-subtext1)",
   cursor: "pointer",
diff --git a/web/src/components/items/RevisionsTab.tsx b/web/src/components/items/RevisionsTab.tsx
index 5b19ac9..0d674cc 100644
--- a/web/src/components/items/RevisionsTab.tsx
+++ b/web/src/components/items/RevisionsTab.tsx
@@ -101,7 +101,7 @@ export function RevisionsTab({ partNumber, isEditor }: RevisionsTabProps) {
     fontSize: "var(--font-table)",
     backgroundColor: "var(--ctp-surface0)",
     border: "1px solid var(--ctp-surface1)",
-    borderRadius: "0.3rem",
+    borderRadius: "0.375rem",
     color: "var(--ctp-text)",
   };
 
@@ -147,7 +147,7 @@ export function RevisionsTab({ partNumber, isEditor }: RevisionsTabProps) {
             padding: "0.25rem 0.5rem",
             fontSize: "var(--font-table)",
             border: "none",
-            borderRadius: "0.3rem",
+            borderRadius: "0.375rem",
             backgroundColor: "var(--ctp-mauve)",
             color: "var(--ctp-crust)",
             cursor: "pointer",
@@ -250,10 +250,10 @@ export function RevisionsTab({ partNumber, isEditor }: RevisionsTabProps) {
                       )
                     }
                     style={{
-                      padding: "0.1rem 0.3rem",
+                      padding: "0.15rem 0.25rem",
                       fontSize: "0.75rem",
                       border: "none",
-                      borderRadius: "0.3rem",
+                      borderRadius: "0.375rem",
                       backgroundColor: "transparent",
                       color: statusColors[rev.status] ?? "var(--ctp-text)",
                       cursor: "pointer",
@@ -332,7 +332,7 @@ export function RevisionsTab({ partNumber, isEditor }: RevisionsTabProps) {
 }
 
 const thStyle: React.CSSProperties = {
-  padding: "0.3rem 0.5rem",
+  padding: "0.25rem 0.5rem",
   textAlign: "left",
   borderBottom: "1px solid var(--ctp-surface1)",
   color: "var(--ctp-subtext1)",
diff --git a/web/src/components/items/WhereUsedTab.tsx b/web/src/components/items/WhereUsedTab.tsx
index c1ccb76..07e8da4 100644
--- a/web/src/components/items/WhereUsedTab.tsx
+++ b/web/src/components/items/WhereUsedTab.tsx
@@ -78,7 +78,7 @@ export function WhereUsedTab({ partNumber }: WhereUsedTabProps) {
 }
 
 const thStyle: React.CSSProperties = {
-  padding: "0.3rem 0.5rem",
+  padding: "0.25rem 0.5rem",
   textAlign: "left",
   borderBottom: "1px solid var(--ctp-surface1)",
   color: "var(--ctp-subtext1)",
diff --git a/web/src/pages/ProjectsPage.tsx b/web/src/pages/ProjectsPage.tsx
index d1aaa73..b10e71e 100644
--- a/web/src/pages/ProjectsPage.tsx
+++ b/web/src/pages/ProjectsPage.tsx
@@ -497,7 +497,7 @@ const btnDangerStyle: React.CSSProperties = {
 };
 
 const btnSmallStyle: React.CSSProperties = {
-  padding: "0.3rem 0.6rem",
+  padding: "0.25rem 0.5rem",
   borderRadius: "0.375rem",
   border: "none",
   backgroundColor: "var(--ctp-surface1)",
diff --git a/web/src/pages/SchemasPage.tsx b/web/src/pages/SchemasPage.tsx
index 4d572e4..d9887ff 100644
--- a/web/src/pages/SchemasPage.tsx
+++ b/web/src/pages/SchemasPage.tsx
@@ -718,13 +718,13 @@ const thStyle: React.CSSProperties = {
 };
 
 const tdStyle: React.CSSProperties = {
-  padding: "0.3rem 0.75rem",
+  padding: "0.25rem 0.75rem",
   borderBottom: "1px solid var(--ctp-surface1)",
   fontSize: "var(--font-body)",
 };
 
 const btnTinyStyle: React.CSSProperties = {
-  padding: "0.2rem 0.5rem",
+  padding: "0.25rem 0.5rem",
   borderRadius: "0.375rem",
   border: "none",
   backgroundColor: "var(--ctp-surface1)",
@@ -735,7 +735,7 @@ const btnTinyStyle: React.CSSProperties = {
 };
 
 const btnTinyPrimaryStyle: React.CSSProperties = {
-  padding: "0.2rem 0.5rem",
+  padding: "0.25rem 0.5rem",
   borderRadius: "0.375rem",
   border: "none",
   backgroundColor: "var(--ctp-mauve)",
diff --git a/web/src/pages/SettingsPage.tsx b/web/src/pages/SettingsPage.tsx
index 2acdcb8..1258d99 100644
--- a/web/src/pages/SettingsPage.tsx
+++ b/web/src/pages/SettingsPage.tsx
@@ -441,7 +441,7 @@ const btnDangerStyle: React.CSSProperties = {
   background: "rgba(243, 139, 168, 0.15)",
   color: "var(--ctp-red)",
   border: "none",
-  padding: "0.3rem 0.6rem",
+  padding: "0.25rem 0.5rem",
   borderRadius: "0.375rem",
   cursor: "pointer",
   fontSize: "0.75rem",
@@ -452,7 +452,7 @@ const btnRevokeConfirmStyle: React.CSSProperties = {
   background: "var(--ctp-red)",
   color: "var(--ctp-crust)",
   border: "none",
-  padding: "0.2rem 0.5rem",
+  padding: "0.25rem 0.5rem",
   borderRadius: "0.375rem",
   cursor: "pointer",
   fontSize: "0.75rem",
@@ -460,7 +460,7 @@ const btnRevokeConfirmStyle: React.CSSProperties = {
 };
 
 const btnTinyStyle: React.CSSProperties = {
-  padding: "0.2rem 0.5rem",
+  padding: "0.25rem 0.5rem",
   borderRadius: "0.375rem",
   border: "none",
   backgroundColor: "var(--ctp-surface1)",