feat(web): responsive top navigation (#12373)

- icons fit in mobile
- guarantee the search bar space in all screen sizes
- fix the storage bar being too wide

web/src/lib/components/shared-components/theme-button.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { moonPath, moonViewBox, sunPath, sunViewBox } from '$lib/assets/svg-paths';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import CircleIconButton, { type Padding } from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import { Theme } from '$lib/constants';
   import { colorTheme, handleToggleTheme } from '$lib/stores/preferences.store';
   import { t } from 'svelte-i18n';
@@ -8,6 +8,8 @@
   $: icon = $colorTheme.value === Theme.LIGHT ? moonPath : sunPath;
   $: viewBox = $colorTheme.value === Theme.LIGHT ? moonViewBox : sunViewBox;
   $: isDark = $colorTheme.value === Theme.DARK;
+
+  export let padding: Padding = '3';
 </script>
 
 {#if !$colorTheme.system}
@@ -18,5 +20,6 @@
     role="switch"
     aria-checked={isDark ? 'true' : 'false'}
     on:click={handleToggleTheme}
+    {padding}
   />
 {/if}