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>

.claude/settings.local.json

@@ -1,7 +1,8 @@
 {
   "permissions": {
     "allow": [
-      "Bash(.:*)"
+      "Bash(.:*)",
+      "Bash(git:*)"
     ]
   }
 }

app/src-tauri/src/commands/project_commands.rs

@@ -102,9 +102,37 @@ pub async fn start_project_container(
 
     // Check for existing container
     let container_id = if let Some(existing_id) = docker::find_existing_container(&project).await? {
-        // Start existing container
+        // Check if docker socket mount matches the current project setting.
+        // If the user toggled "Allow container spawning" after the container was
+        // created, we need to recreate the container for the mount change to take
+        // effect.
+        let has_socket = docker::container_has_docker_socket(&existing_id).await.unwrap_or(false);
+        if has_socket != project.allow_docker_access {
+            log::info!(
+                "Docker socket mismatch (container has_socket={}, project wants={}), recreating container",
+                has_socket, project.allow_docker_access
+            );
+            // Safe to remove and recreate: the claude config named volume is
+            // keyed by project ID (not container ID) so it persists across
+            // container recreation. Bind mounts (workspace, SSH, AWS) are
+            // host paths and are unaffected.
+            let _ = docker::stop_container(&existing_id).await;
+            docker::remove_container(&existing_id).await?;
+            let new_id = docker::create_container(
+                &project,
+                api_key.as_deref(),
+                &docker_socket,
+                &image_name,
+                aws_config_path.as_deref(),
+                &settings.global_aws,
+            ).await?;
+            docker::start_container(&new_id).await?;
+            new_id
+        } else {
+            // Start existing container as-is
             docker::start_container(&existing_id).await?;
             existing_id
+        }
     } else {
         // Create new container
         let new_id = docker::create_container(

app/src-tauri/src/docker/container.rs

@@ -288,6 +288,27 @@ pub async fn remove_container(container_id: &str) -> Result<(), String> {
         .map_err(|e| format!("Failed to remove container: {}", e))
 }
 
+/// Check whether an existing container has docker socket mounted.
+pub async fn container_has_docker_socket(container_id: &str) -> Result<bool, String> {
+    let docker = get_docker()?;
+    let info = docker
+        .inspect_container(container_id, None)
+        .await
+        .map_err(|e| format!("Failed to inspect container: {}", e))?;
+
+    let has_socket = info
+        .host_config
+        .and_then(|hc| hc.mounts)
+        .map(|mounts| {
+            mounts.iter().any(|m| {
+                m.target.as_deref() == Some("/var/run/docker.sock")
+            })
+        })
+        .unwrap_or(false);
+
+    Ok(has_socket)
+}
+
 pub async fn get_container_info(project: &Project) -> Result<Option<ContainerInfo>, String> {
     if let Some(ref container_id) = project.container_id {
         let docker = get_docker()?;

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>

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>

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>

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" />

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

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) => (

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" }}
     />
   );
 }

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%;