From 60842befde0296318bc142f6e6eea869ba06c31c Mon Sep 17 00:00:00 2001
From: Josh Knapp <shadow@dao-mail.com>
Date: Fri, 27 Feb 2026 10:31:27 -0800
Subject: [PATCH] Fix UI padding and text flush against container edges

- Remove global * { padding: 0 } reset that was overriding all Tailwind
  padding classes (unlayered CSS beats Tailwind v4 @layer utilities)
- Add color-scheme: dark to fix native form controls (select dropdowns)
  rendering with white backgrounds
- Make sidebar responsive (25% width, min 224px, max 320px)
- Increase internal padding on TopBar, Sidebar, ProjectList, StatusBar
- Add flex-shrink-0 to TopBar status indicators to prevent clipping
- Allow project action buttons to wrap on narrow sidebars
- Increase terminal view padding for breathing room

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/src/components/layout/Sidebar.tsx        | 4 ++--
 app/src/components/layout/StatusBar.tsx      | 2 +-
 app/src/components/layout/TopBar.tsx         | 4 ++--
 app/src/components/projects/ProjectCard.tsx  | 2 +-
 app/src/components/projects/ProjectList.tsx  | 2 +-
 app/src/components/settings/AwsSettings.tsx  | 2 +-
 app/src/components/terminal/TerminalView.tsx | 2 +-
 app/src/index.css                            | 6 +-----
 8 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/app/src/components/layout/Sidebar.tsx b/app/src/components/layout/Sidebar.tsx
index 210a2f4..5a63ebc 100644
--- a/app/src/components/layout/Sidebar.tsx
+++ b/app/src/components/layout/Sidebar.tsx
@@ -6,7 +6,7 @@ export default function Sidebar() {
   const { sidebarView, setSidebarView } = useAppState();
 
   return (
-    <div className="flex flex-col h-full w-64 bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg overflow-hidden">
+    <div className="flex flex-col h-full w-[25%] min-w-56 max-w-80 bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg overflow-hidden">
       {/* Nav tabs */}
       <div className="flex border-b border-[var(--border-color)]">
         <button
@@ -32,7 +32,7 @@ export default function Sidebar() {
       </div>
 
       {/* Content */}
-      <div className="flex-1 overflow-y-auto">
+      <div className="flex-1 overflow-y-auto p-1">
         {sidebarView === "projects" ? <ProjectList /> : <SettingsPanel />}
       </div>
     </div>
diff --git a/app/src/components/layout/StatusBar.tsx b/app/src/components/layout/StatusBar.tsx
index 423d7b0..9d978cd 100644
--- a/app/src/components/layout/StatusBar.tsx
+++ b/app/src/components/layout/StatusBar.tsx
@@ -5,7 +5,7 @@ export default function StatusBar() {
   const running = projects.filter((p) => p.status === "running").length;
 
   return (
-    <div className="flex items-center h-6 px-3 bg-[var(--bg-tertiary)] border border-[var(--border-color)] rounded-lg text-xs text-[var(--text-secondary)]">
+    <div className="flex items-center h-6 px-4 bg-[var(--bg-tertiary)] border border-[var(--border-color)] rounded-lg text-xs text-[var(--text-secondary)]">
       <span>
         {projects.length} project{projects.length !== 1 ? "s" : ""}
       </span>
diff --git a/app/src/components/layout/TopBar.tsx b/app/src/components/layout/TopBar.tsx
index 676c12e..7f79ff3 100644
--- a/app/src/components/layout/TopBar.tsx
+++ b/app/src/components/layout/TopBar.tsx
@@ -6,10 +6,10 @@ export default function TopBar() {
 
   return (
     <div className="flex items-center h-10 bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg overflow-hidden">
-      <div className="flex-1 overflow-x-auto">
+      <div className="flex-1 overflow-x-auto pl-2">
         <TerminalTabs />
       </div>
-      <div className="flex items-center gap-2 px-3 text-xs text-[var(--text-secondary)]">
+      <div className="flex items-center gap-2 px-4 flex-shrink-0 text-xs text-[var(--text-secondary)]">
         <StatusDot ok={dockerAvailable === true} label="Docker" />
         <StatusDot ok={imageExists === true} label="Image" />
       </div>
diff --git a/app/src/components/projects/ProjectCard.tsx b/app/src/components/projects/ProjectCard.tsx
index 6736305..e3736a5 100644
--- a/app/src/components/projects/ProjectCard.tsx
+++ b/app/src/components/projects/ProjectCard.tsx
@@ -159,7 +159,7 @@ export default function ProjectCard({ project }: Props) {
           </div>
 
           {/* Action buttons */}
-          <div className="flex items-center gap-1">
+          <div className="flex items-center gap-1 flex-wrap">
             {isStopped ? (
               <>
                 <ActionButton onClick={handleStart} disabled={loading} label="Start" />
diff --git a/app/src/components/projects/ProjectList.tsx b/app/src/components/projects/ProjectList.tsx
index 0fea39a..e97b433 100644
--- a/app/src/components/projects/ProjectList.tsx
+++ b/app/src/components/projects/ProjectList.tsx
@@ -8,7 +8,7 @@ export default function ProjectList() {
   const [showAdd, setShowAdd] = useState(false);
 
   return (
-    <div className="p-2">
+    <div className="p-3">
       <div className="flex items-center justify-between px-2 py-1 mb-2">
         <span className="text-xs font-semibold uppercase text-[var(--text-secondary)]">
           Projects
diff --git a/app/src/components/settings/AwsSettings.tsx b/app/src/components/settings/AwsSettings.tsx
index 8c1a6ee..780c35c 100644
--- a/app/src/components/settings/AwsSettings.tsx
+++ b/app/src/components/settings/AwsSettings.tsx
@@ -83,7 +83,7 @@ export default function AwsSettings() {
           <select
             value={globalAws.aws_profile ?? ""}
             onChange={(e) => handleChange("aws_profile", e.target.value)}
-            className="w-full px-2 py-1.5 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:outline-none focus:border-[var(--accent)]"
+            className="w-full px-2 py-1.5 text-xs bg-[var(--bg-primary)] text-[var(--text-primary)] border border-[var(--border-color)] rounded focus:outline-none focus:border-[var(--accent)]"
           >
             <option value="">None (use default)</option>
             {profiles.map((p) => (
diff --git a/app/src/components/terminal/TerminalView.tsx b/app/src/components/terminal/TerminalView.tsx
index 7039800..67d00e9 100644
--- a/app/src/components/terminal/TerminalView.tsx
+++ b/app/src/components/terminal/TerminalView.tsx
@@ -170,7 +170,7 @@ export default function TerminalView({ sessionId, active }: Props) {
     <div
       ref={containerRef}
       className={`w-full h-full ${active ? "" : "hidden"}`}
-      style={{ padding: "4px" }}
+      style={{ padding: "8px" }}
     />
   );
 }
diff --git a/app/src/index.css b/app/src/index.css
index be98999..5174d88 100644
--- a/app/src/index.css
+++ b/app/src/index.css
@@ -12,13 +12,9 @@
   --success: #3fb950;
   --warning: #d29922;
   --error: #f85149;
+  color-scheme: dark;
 }
 
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
 
 html, body, #root {
   height: 100%;