fix select components height

website/src/lib/assets/symbols.ts

@@ -1,6 +1,5 @@
 import {
     Landmark,
-    Icon,
     Shell,
     Bike,
     Building,
@@ -29,6 +28,7 @@ import {
     TriangleAlert,
     Anchor,
     Toilet,
+    X,
     type IconProps,
 } from '@lucide/svelte';
 import {
@@ -61,6 +61,7 @@ import {
     TriangleAlert as TriangleAlertSvg,
     Anchor as AnchorSvg,
     Toilet as ToiletSvg,
+    X as XSvg,
 } from 'lucide-static';
 import type { Component } from 'svelte';
 
@@ -87,7 +88,11 @@ export const symbols: { [key: string]: Symbol } = {
         icon: ShoppingBasket,
         iconSvg: ShoppingBasketSvg,
     },
-    crossing: { value: 'Crossing' },
+    crossing: {
+        value: 'Crossing',
+        icon: X,
+        iconSvg: XSvg,
+    },
     department_store: {
         value: 'Department Store',
         icon: ShoppingBasket,

website/src/lib/components/map/layer-control/LayerControlSettings.svelte

@@ -160,7 +160,7 @@
                                     type="single"
                                     onValueChange={setOpacityFromSelection}
                                 >
-                                    <Select.Trigger class="h-8 mr-1 w-full">
+                                    <Select.Trigger class="mr-1 w-full" size="sm">
                                         {#if selectedOverlay}
                                             {#if isSelected($selectedOverlayTree, selectedOverlay)}
                                                 {#if $isLayerFromExtension(selectedOverlay)}

website/src/lib/components/toolbar/tools/routing/Routing.svelte

@@ -163,7 +163,7 @@
                             {i18n._('toolbar.routing.activity')}
                         </span>
                         <Select.Root type="single" bind:value={$routingProfile}>
-                            <Select.Trigger class="h-8 grow">
+                            <Select.Trigger class="grow" size="sm">
                                 {i18n._(`toolbar.routing.activities.${$routingProfile}`)}
                             </Select.Trigger>
                             <Select.Content>

website/src/lib/components/toolbar/tools/scissors/Scissors.svelte

@@ -107,7 +107,7 @@
             {i18n._('toolbar.scissors.split_as')}
         </span>
         <Select.Root bind:value={$splitAs} type="single">
-            <Select.Trigger class="h-8 w-fit grow">
+            <Select.Trigger class="w-fit grow" size="sm">
                 {i18n._('gpx.' + $splitAs)}
             </Select.Trigger>
             <Select.Content>

website/src/lib/components/toolbar/tools/waypoint/Waypoint.svelte

@@ -174,19 +174,27 @@
             bind:value={description}
             id="description"
             disabled={!canCreate && !$selectedWaypoint}
+            class="min-h-8 h-8 py-1 px-3 text-sm"
         />
         <Label for="symbol">{i18n._('toolbar.waypoint.icon')}</Label>
         <Select.Root bind:value={sym} type="single">
             <Select.Trigger
                 id="symbol"
-                class="w-full h-8"
+                size="sm"
+                class="w-full"
                 disabled={!canCreate && !$selectedWaypoint}
             >
-                {#if symbolKey}
+                <span class="flex flex-row gap-1.5 items-center">
-                    {i18n._(`gpx.symbol.${symbolKey}`)}
+                    {#if symbolKey}
-                {:else}
+                        {#if symbols[symbolKey].icon}
-                    {sym}
+                            {@const Component = symbols[symbolKey].icon}
-                {/if}
+                            <Component size="14" />
+                        {/if}
+                        {i18n._(`gpx.symbol.${symbolKey}`)}
+                    {:else}
+                        {sym}
+                    {/if}
+                </span>
             </Select.Trigger>
             <Select.Content class="max-h-60 overflow-y-scroll">
                 {#each sortedSymbols as [key, symbol]}
@@ -194,7 +202,7 @@
                         <span>
                             {#if symbol.icon}
                                 {@const Component = symbol.icon}
-                                <Component size="14" class="inline-block align-sub mr-0.5" />
+                                <Component size="14" class="inline-block align-sub" />
                             {:else}
                                 <span class="w-4 inline-block"></span>
                             {/if}