fix the header on trading screen

src/lib/components/trading/GraficoCandlestick.svelte

@@ -55,7 +55,7 @@
   const colorKey = (d) => (Number(d.close) < Number(d.open) ? 'desc' : 'asc');
 </script>
 
-<div class="h-[550px] p-4 border rounded bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 cursor-crosshair select-none">
+<div class="h-full p-4 border rounded bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 cursor-crosshair select-none">
   <Chart
     data={ohlc}
     x="date"

src/lib/layout/Header.svelte

@@ -11,39 +11,48 @@
   };
 </script>
 
-<div class="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 p-6 flex flex-col md:flex-row md:justify-between md:items-center">
-  <div>
-    <h1 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">{title}</h1>
-    {#if subtitle}
-      <p class="text-gray-500 dark:text-gray-300 text-sm">{subtitle}</p>
-    {/if}
-  </div>
-  <div class="flex items-center mt-2 md:mt-0 space-x-4">
-    <slot name="extra" />
-    <div class="flex items-center text-gray-500 dark:text-gray-300 text-sm">
-      {#each breadcrumb as item, i}
-        <span class="{item.active ? 'text-gray-900 dark:text-gray-100 font-medium' : ''}">{item.label}</span>
-        {#if i < breadcrumb.length -1}
-          <span class="mx-2">/</span>
-        {/if}
-      {/each}
-    </div>
-    <div class="flex items-center space-x-2">
-      <button 
-        class="p-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200" 
-        on:click={toggleTheme}
-        title={$darkMode ? 'Modo Claro' : 'Modo Escuro'}
-      >
-        {#if $darkMode}
-          <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
-            <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd" />
-          </svg>
-        {:else}
-          <svg class="w-5 h-5 text-gray-700 dark:text-gray-300" fill="currentColor" viewBox="0 0 20 20">
-            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
-          </svg>
-        {/if}
-      </button>
+<div class="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 p-6">
+  <div class="mx-auto w-full max-w-7xl">
+    <div class="flex gap-4">
+      <div class="flex items-center justify-between">
+        <div>
+          <h1 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">{title}</h1>
+          {#if subtitle}
+            <p class="text-gray-500 dark:text-gray-300 text-sm">{subtitle}</p>
+          {/if}
+        </div>
+      </div>
+
+      <div class="w-full">
+        <slot name="extra" />
+      </div>
+      <div class="flex items-center gap-4">
+          <div class="flex items-center text-gray-500 dark:text-gray-300 text-sm">
+            {#each breadcrumb as item, i}
+              <span class="{item.active ? 'text-gray-900 dark:text-gray-100 font-medium' : ''}">{item.label}</span>
+              {#if i < breadcrumb.length -1}
+                <span class="mx-2">/</span>
+              {/if}
+            {/each}
+          </div>
+        </div>
+       <div class="flex items-center space-x-2">
+            <button 
+              class="p-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200" 
+              on:click={toggleTheme}
+              title={$darkMode ? 'Modo Claro' : 'Modo Escuro'}
+            >
+              {#if $darkMode}
+                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd" />
+                </svg>
+              {:else}
+                <svg class="w-5 h-5 text-gray-700 dark:text-gray-300" fill="currentColor" viewBox="0 0 20 20">
+                  <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
+                </svg>
+              {/if}
+            </button>
+          </div>
     </div>
   </div>
-</div>
+</div>

src/routes/trading/+page.svelte

@@ -190,28 +190,33 @@ $: displayPendingSells = pendingSells.map((o) => ({
 
 <div>
   <Header title="Trading" subtitle="Trading do sistema" breadcrumb={breadcrumb}>
-    <svelte:fragment slot="extra">
-      <div class="flex items-center gap-3">
-        <button class="px-3 py-1.5 rounded bg-green-600 hover:bg-green-700 text-white focus:outline-none focus:ring-2 focus:ring-green-500" on:click={() => (showBuyModal = true)}>COMPRAR</button>
-        <button class="px-3 py-1.5 rounded bg-red-600 hover:bg-red-700 text-white focus:outline-none focus:ring-2 focus:ring-red-500" on:click={() => (showSellModal = true)}>VENDER</button>
-        <div class="flex items-center gap-2">
-          <span class="text-xs text-gray-600 dark:text-gray-300">Estado</span>
-          <select bind:value={selectedState} class="block w-32 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700/70 text-gray-900 dark:text-gray-200 px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500">
-            {#each stateOptions as uf}
-              <option value={uf}>{uf}</option>
-            {/each}
-          </select>
-        </div>
-        <div class="flex items-center gap-2">
-          <span class="text-xs text-gray-600 dark:text-gray-300">Commodity</span>
-          <select bind:value={selectedCommodity} class="block w-56 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700/70 text-gray-900 dark:text-gray-200 px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500">
-            {#each tokens as t}
-              <option value={t.id}>{t.label || t.name}</option>
-            {/each}
-          </select>
-        </div>
+<svelte:fragment slot="extra">
+  <div class="flex w-full items-center justify-between gap-4 md:gap-10">
+    <div class="flex gap-8">
+      <div class="flex flex-col items-center gap-2">
+        <span class="text-xs text-gray-600 dark:text-gray-300">Estado</span>
+        <select bind:value={selectedState} class="block w-32 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700/70 text-gray-900 dark:text-gray-200 px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500">
+          {#each stateOptions as uf}
+            <option value={uf}>{uf}</option>
+          {/each}
+        </select>
       </div>
-    </svelte:fragment>
+      <div class="flex flex-col items-center gap-2">
+        <span class="text-xs text-gray-600 dark:text-gray-300">Commodity</span>
+        <select bind:value={selectedCommodity} class="block w-56 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700/70 text-gray-900 dark:text-gray-200 px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500">
+          {#each tokens as t}
+            <option value={t.id}>{t.label || t.name}</option>
+          {/each}
+        </select>
+      </div>
+    </div>
+
+    <div class="flex items-center gap-2 md:gap-3  ">
+      <button class="px-3 py-1.5 rounded bg-green-600 hover:bg-green-700 text-white focus:outline-none focus:ring-2 focus:ring-green-500" on:click={() => (showBuyModal = true)}>COMPRAR</button>
+      <button class="px-3 py-1.5 rounded bg-red-600 hover:bg-red-700 text-white focus:outline-none focus:ring-2 focus:ring-red-500" on:click={() => (showSellModal = true)}>VENDER</button>
+    </div>
+  </div>
+</svelte:fragment>
   </Header>
 
   <div class="p-4 space-y-4">