chore: rounded map corner when needed (#18163)

web/src/lib/components/album-page/album-map.svelte

@@ -131,6 +131,7 @@
               bind:mapMarkers
               onSelect={onViewAssets}
               showSettings={false}
+              rounded
             />
           {/await}
         </div>

web/src/lib/components/shared-components/change-location.svelte

@@ -191,6 +191,7 @@
             clickable={true}
             onClickPoint={(selected) => (point = selected)}
             showSettings={false}
+            rounded
           />
         {/await}
       </div>

web/src/lib/components/shared-components/map/map.svelte

@@ -53,6 +53,7 @@
     onSelect?: (assetIds: string[]) => void;
     onClickPoint?: ({ lat, lng }: { lat: number; lng: number }) => void;
     popup?: import('svelte').Snippet<[{ marker: MapMarkerResponseDto }]>;
+    rounded?: boolean;
   }
 
   let {
@@ -68,6 +69,7 @@
     onSelect = () => {},
     onClickPoint = () => {},
     popup,
+    rounded = false,
   }: Props = $props();
 
   let map: maplibregl.Map | undefined = $state();
@@ -247,7 +249,7 @@
 <MapLibre
   {hash}
   style=""
-  class="h-full rounded-2xl"
+  class="h-full {rounded ? 'rounded-2xl' : 'rounded-none'}"
   {center}
   {zoom}
   attributionControl={false}
@@ -274,7 +276,9 @@
     {#if showSettings}
       <Control>
         <ControlGroup>
-          <ControlButton onclick={handleSettingsClick}><Icon path={mdiCog} size="100%" /></ControlButton>
+          <ControlButton onclick={handleSettingsClick}
+            ><Icon path={mdiCog} size="100%" class="text-black/80" /></ControlButton
+          >
         </ControlGroup>
       </Control>
     {/if}
@@ -283,7 +287,7 @@
       <Control position="top-right">
         <ControlGroup>
           <ControlButton onclick={() => onOpenInMapView()}>
-            <Icon title={$t('open_in_map_view')} path={mdiMap} size="100%" />
+            <Icon title={$t('open_in_map_view')} path={mdiMap} size="100%" class="text-black/80" />
           </ControlButton>
         </ControlGroup>
       </Control>

web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -72,7 +72,7 @@
 {#if $featureFlags.loaded && $featureFlags.map}
   <UserPageLayout title={data.meta.title}>
     <div class="isolate h-full w-full">
-      <Map hash onSelect={onViewAssets} />
+      <Map hash onSelect={onViewAssets} rounded />
     </div>
   </UserPageLayout>
   <Portal target="body">