From 379b3d337071be0b9dc3ef5247a79c3d383cece3 Mon Sep 17 00:00:00 2001
From: Hermes Agent <hermes@local>
Date: Sat, 19 Sep 2026 15:14:30 +0200
Subject: [PATCH] ui: zero Container padding (space kept for types) so
 header/footer use only their own insets

---
 src/ui.tsx | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/ui.tsx b/src/ui.tsx
index 5e91c96..4e3ab2d 100644
--- a/src/ui.tsx
+++ b/src/ui.tsx
@@ -26,19 +26,15 @@ const MIN_WINDOW_SIZE = { width: 320, height: 200 }
 // Full plugin version shown in the footer status bar. Keep in sync with package.json "version".
 const PLUGIN_VERSION = '0.1.0'
 
-// Full-bleed separator: breaks out of the Container's horizontal `space="medium"` padding
-// (which is `0 var(--space-medium)`) so the line spans the whole window edge-to-edge.
+// Full-bleed separator: Container has no horizontal padding, so the <hr> (flex item,
+// stretched to full width) spans the whole window edge-to-edge.
 function Separator () {
   return (
     <hr
       style={{
         border: 'none',
         height: '1px',
-        backgroundColor: 'var(--figma-color-border)',
-        marginTop: 0,
-        marginBottom: 0,
-        marginLeft: 'calc(-1 * var(--space-medium))',
-        marginRight: 'calc(-1 * var(--space-medium))'
+        backgroundColor: 'var(--figma-color-border)'
       }}
     />
   )
@@ -337,7 +333,7 @@ function Plugin () {
 
   return (
     <div className="plugin-root" style={{ position: 'relative', width: '100%', height: '100%' }}>
-      <Container space="medium" style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+      <Container space="medium" style={{ height: '100%', display: 'flex', flexDirection: 'column', padding: 0 }}>
         {/* Header — navigation bar */}
         <header style={{ display: 'flex', alignItems: 'center', flex: '0 0 auto', padding: 'var(--space-8)' }}>
           <Text style={{ fontSize: '13px', fontWeight: 600 }}>Settings</Text>
@@ -361,7 +357,7 @@ function Plugin () {
         </header>
         <Separator />
         {/* Body — semantic <main>, stretches via flex child of the column */}
-        <main style={{ flex: '1 1 auto', overflow: 'auto' }}>
+        <main style={{ flex: '1 1 auto', overflow: 'auto', padding: 'var(--space-8)' }}>
           {/* empty placeholder for now */}
         </main>
         {/* Footer — status bar */}