Fix header button height inconsistency and reorder toolbar buttons

Author: moonwhaler

frontend/src/components/ui/ColumnSelector.svelte

@@ -72,7 +72,7 @@
   <button
     bind:this={buttonEl}
     onclick={() => open = !open}
-    class="btn btn-secondary px-2 relative"
+    class="btn btn-secondary px-2 py-2.5 relative"
     title={label}
     aria-label={label}
   >

frontend/src/routes/Jobs.svelte

@@ -230,7 +230,7 @@
   <div class="flex items-center border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
     <button
       onclick={() => viewPreferencesStore.setViewMode('grid')}
-      class="py-2 px-2 transition-colors {$viewPreferencesStore === 'grid'
+      class="py-2.5 px-2 transition-colors {$viewPreferencesStore === 'grid'
         ? 'bg-primary-600 text-white'
         : 'bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'}"
       title={m.jobs_grid_view()}
@@ -241,7 +241,7 @@
     </button>
     <button
       onclick={() => viewPreferencesStore.setViewMode('list')}
-      class="py-2 px-2 transition-colors {$viewPreferencesStore === 'list'
+      class="py-2.5 px-2 transition-colors {$viewPreferencesStore === 'list'
         ? 'bg-primary-600 text-white'
         : 'bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'}"
       title={m.jobs_list_view()}
@@ -257,10 +257,10 @@
   <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
     <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{m.jobs_title()}</h1>
     <div class="flex items-center gap-2">
-      {@render viewToggle()}
       {#if $viewPreferencesStore === 'list'}
         <ColumnSelector />
       {/if}
+      {@render viewToggle()}
       <a href="#/jobs/new" class="btn btn-primary sm:w-auto text-center">{m.dashboard_new_job()}</a>
     </div>
   </div>