Some small layout fixes for control page

backend/app/main.py

@@ -1039,6 +1039,12 @@ if app_settings.static_dir.exists() and any(app_settings.static_dir.iterdir()):
             StaticFiles(directory=app_settings.static_dir / "img"),
             name="img",
         )
+    if (app_settings.static_dir / "icons").exists():
+        app.mount(
+            "/icons",
+            StaticFiles(directory=app_settings.static_dir / "icons"),
+            name="icons",
+        )
 
 
 @app.get("/")

frontend/src/components/control/ExtruderControls.tsx

@@ -31,7 +31,7 @@ export function ExtruderControls({ status, nozzleCount }: ExtruderControlsProps)
   const isDisabled = !isConnected || isPrinting || extrudeMutation.isPending;
 
   return (
-    <div className="flex flex-col items-center gap-1.5 flex-1 justify-center">
+    <div className="flex flex-col items-center gap-1.5 justify-center">
       {/* Left/Right Toggle - only for dual nozzle */}
       {isDualNozzle && (
         <div className="flex rounded-md overflow-hidden border border-bambu-dark-tertiary mb-1 flex-shrink-0">

frontend/src/pages/ControlPage.tsx

@@ -10,7 +10,7 @@ import { JogPad } from '../components/control/JogPad';
 import { BedControls } from '../components/control/BedControls';
 import { ExtruderControls } from '../components/control/ExtruderControls';
 import { AMSSectionDual } from '../components/control/AMSSectionDual';
-import { Loader2, WifiOff, Video, Webcam, HardDrive, Settings } from 'lucide-react';
+import { Loader2, WifiOff, Video, Webcam, Settings } from 'lucide-react';
 
 export function ControlPage() {
   const [searchParams, setSearchParams] = useSearchParams();
@@ -131,7 +131,7 @@ export function ControlPage() {
             {/* Camera Header Icons - same height as Control header */}
             <div className="flex items-center justify-end gap-2 px-3 py-2.5 bg-bambu-dark-secondary border-b border-bambu-dark-tertiary min-h-[44px]">
               <button className="p-1.5 rounded hover:bg-bambu-dark-tertiary text-bambu-gray hover:text-white">
-                <HardDrive className="w-4 h-4" />
+                <img src="/icons/micro-sd.svg" alt="SD Card" className="w-4 h-4 icon-theme" />
               </button>
               <button className="p-1.5 rounded hover:bg-bambu-dark-tertiary text-bambu-gray hover:text-white">
                 <Video className="w-4 h-4" />
@@ -165,7 +165,7 @@ export function ControlPage() {
           </div>
 
           {/* Right Panel - Control */}
-          <div className="w-[620px] flex flex-col bg-bambu-dark-secondary border-l border-bambu-dark-tertiary overflow-y-auto">
+          <div className="w-[680px] flex flex-col bg-bambu-dark-secondary border-l border-bambu-dark-tertiary overflow-y-auto">
             {/* Control Header - same height as Camera header */}
             <div className="flex items-center justify-between px-3 py-2.5 border-b border-bambu-dark-tertiary min-h-[44px]">
               <span className="text-sm text-bambu-gray">Control</span>
@@ -195,9 +195,10 @@ export function ControlPage() {
             {/* Control Body */}
             <div className="flex-1 p-4 bg-bambu-dark">
               {/* Top Section: Temp + Movement + Extruder */}
-              <div className="flex gap-6 mb-4" style={{ minHeight: '300px' }}>
-                {/* Temperature Column */}
-                <TemperatureColumn
+              <div className="mb-4 bg-bambu-dark-tertiary rounded-[10px] p-3">
+                <div className="flex gap-4 bg-bambu-dark-secondary rounded-[8px] p-4 overflow-hidden" style={{ minHeight: '300px' }}>
+                  {/* Temperature Column */}
+                  <TemperatureColumn
                   printerId={selectedPrinter.id}
                   status={selectedStatus}
                   nozzleCount={selectedPrinter.nozzle_count}
@@ -224,6 +225,7 @@ export function ControlPage() {
                     nozzleCount={selectedPrinter.nozzle_count}
                   />
                 </div>
+                </div>
               </div>
 
               {/* AMS Section */}

mockup/icons/skip-objects.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" height="512" viewBox="0 0 32 32" width="512" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><path d="m30 17-3 3-3-3h2c0-6.0654-4.9355-11-11-11s-11 4.9346-11 11h-2c0-7.168 5.832-13 13-13s13 5.832 13 13zm0 5h-6v2h6zm-10 0h-2v2h2zm-16 0h-2v2h2zm4 0h-2v2h2zm4 0h-2v2h2zm4 0h-2v2h2z"/></svg>

static/index.html

@@ -7,8 +7,8 @@
     <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png" />
     <link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png" />
-    <script type="module" crossorigin src="/assets/index-BdU-188w.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-Ca04bhbd.css">
+    <script type="module" crossorigin src="/assets/index-BRHFyg0M.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BzyUcjxL.css">
   </head>
   <body>
     <div id="root"></div>