chore: fix header form spacings and height differences (#210)

* Reduce logo size and fix spacings * Fix height differences between <input> and <select> elements
Hochfrequenz · Jan 29, 2025 · 6fc01da · 6fc01da
1 parent b83d318
commit 6fc01da
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 7 deletions.
diff --git a/src/lib/components/features/ebd-input.svelte b/src/lib/components/features/ebd-input.svelte
@@ -87,6 +87,7 @@
   }
 </script>
 
+<!-- py-[9.25px] is required since the browser renders <input> and <select> slightly differently -->
 <div class="flex flex-col items-start mt-2 w-full relative">
   <input
     type="text"
@@ -97,7 +98,7 @@
     on:focus={handleFocus}
     on:blur={handleBlur}
     placeholder={isFocused ? "" : "Bitte auswählen"}
-    class="inline-block border-2 border-white rounded-lg bg-secondary py-3 px-2 ps-3 pe-4 focus:outline-none w-full placeholder-black disabled:placeholder-opacity-25 text-base leading-relaxed cursor-pointer"
+    class="inline-block border-2 border-white rounded-lg bg-secondary py-[9.25px] px-2 ps-3 pe-4 focus:outline-none w-full placeholder-black disabled:placeholder-opacity-25 text-base leading-relaxed cursor-pointer"
   />
 
   <label

diff --git a/src/lib/components/features/format-version-select.svelte b/src/lib/components/features/format-version-select.svelte
@@ -18,7 +18,7 @@
     id="format-version-select"
     bind:value={selectedVersion}
     on:change={handleSelect}
-    class="inline-block border-2 border-white rounded-lg bg-secondary py-3 px-2 ps-3 pe-4 focus:outline-0 w-full cursor-pointer text-base leading-relaxed"
+    class="inline-block border-2 border-white rounded-lg bg-secondary py-3 px-2 ps-3 pe-4 focus:outline-none w-full cursor-pointer text-base leading-relaxed"
   >
     <option value="">Bitte auswählen</option>
     {#each formatVersions as version}

diff --git a/src/lib/components/shared/header.svelte b/src/lib/components/shared/header.svelte
@@ -36,22 +36,22 @@
       class="flex items-center justify-between px-6 py-2 border-b border-white/10"
       aria-label="Global"
     >
-      <div class="flex-none pl-3">
+      <div class="flex-none">
         <a href="{base}/" title="landingpage">
-          <IconLogo size={30} />
+          <IconLogo size={23} />
         </a>
       </div>
 
       <div class="flex items-center gap-4 w-[45%]">
         <span class="text-xl text-black/70"> Entscheidungsbaumdiagramme </span>
-        <div class="w-2/5 flex items-center">
+        <div class="w-2/5 flex items-center pl-1 pb-1">
           <FormatVersionSelect
             {formatVersions}
             selectedVersion={selectedFormatVersion}
             onSelect={onFormatVersionSelect}
           />
         </div>
-        <div class="flex items-center gap-1 w-2/5">
+        <div class="flex items-center gap-1 w-2/5 pb-1">
           <div class="flex-1 flex items-center">
             <EbdInput
               ebds={ebdList}
@@ -61,7 +61,7 @@
               onSelect={onEbdSelect}
             />
           </div>
-          <div class="flex items-center">
+          <div class="flex items-center pt-2">
             <EbdNavigation
               currentEbds={ebdList}
               selectedEbdCode={selectedEbd}