From 036d314cb6f774f20164fcda056f6d07281f93e4 Mon Sep 17 00:00:00 2001
From: Snowknight26 <Snowknight26@users.noreply.github.com>
Date: Thu, 4 Sep 2025 08:59:26 -0500
Subject: [PATCH] fix(web): Make Manage location utility header responsive
 (#21480)

* fix(web): Make Manage location utility header responsive

* Consolidate <p> into <Text>
---
 i18n/en.json                                       |  2 +-
 .../(user)/utilities/geolocation/+page.svelte      | 14 +++++++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/i18n/en.json b/i18n/en.json
index c83aac618e..82748c7756 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -1735,7 +1735,7 @@
   "select_user_for_sharing_page_err_album": "Failed to create album",
   "selected": "Selected",
   "selected_count": "{count, plural, other {# selected}}",
-  "selected_gps_coordinates": "selected gps coordinates",
+  "selected_gps_coordinates": "Selected GPS Coordinates",
   "send_message": "Send message",
   "send_welcome_email": "Send welcome email",
   "server_endpoint": "Server Endpoint",
diff --git a/web/src/routes/(user)/utilities/geolocation/+page.svelte b/web/src/routes/(user)/utilities/geolocation/+page.svelte
index c251146b45..48e94d750f 100644
--- a/web/src/routes/(user)/utilities/geolocation/+page.svelte
+++ b/web/src/routes/(user)/utilities/geolocation/+page.svelte
@@ -228,7 +228,9 @@
         <Text class="hidden md:block text-xs mr-4 text-dark/50">{$t('geolocation_instruction_location')}</Text>
       {/if}
       <div class="border flex place-items-center place-content-center px-2 py-1 bg-primary/10 rounded-2xl">
-        <p class="text-xs text-gray-500 font-mono mr-5 ml-2 uppercase">{$t('selected_gps_coordinates')}</p>
+        <Text class="hidden md:inline-block text-xs text-gray-500 font-mono mr-5 ml-2 uppercase">
+          {$t('selected_gps_coordinates')}
+        </Text>
         <Text
           title="latitude, longitude"
           class="rounded-3xl font-mono text-sm text-primary px-2 py-1 transition-all duration-100 ease-in-out {locationUpdated
@@ -237,9 +239,9 @@
         >
       </div>
 
-      <Button size="small" color="secondary" variant="ghost" leadingIcon={mdiPencilOutline} onclick={handlePickOnMap}
-        >{$t('location_picker_choose_on_map')}</Button
-      >
+      <Button size="small" color="secondary" variant="ghost" leadingIcon={mdiPencilOutline} onclick={handlePickOnMap}>
+        <Text class="hidden sm:inline-block">{$t('location_picker_choose_on_map')}</Text>
+      </Button>
       <Button
         leadingIcon={mdiMapMarkerMultipleOutline}
         size="small"
@@ -247,7 +249,9 @@
         disabled={assetInteraction.selectedAssets.length === 0}
         onclick={() => handleUpdate()}
       >
-        {$t('apply_count', { values: { count: assetInteraction.selectedAssets.length } })}
+        <Text class="hidden sm:inline-block">
+          {$t('apply_count', { values: { count: assetInteraction.selectedAssets.length } })}
+        </Text>
       </Button>
     </div>
   {/snippet}