From 22a6d48a3e8178e881994d3b64cde2f5a3aaa4a9 Mon Sep 17 00:00:00 2001
From: melvinchia3636 <melvinchia623600@gmail.com>
Date: Tue, 2 Jun 2026 00:42:22 +0800
Subject: [PATCH] fix(ui): minor layout fix to Location Input component

---
 apps/lifeforge--achievements                  |  1 +
 apps/lifeforge--wallet                        |  1 +
 .../components/LocationActionButton.tsx       | 49 -----------------
 .../LocationServiceStatusIndicator.tsx        | 55 +++++++++++++++++++
 .../components/inputs/LocationInput/index.tsx | 10 +---
 5 files changed, 59 insertions(+), 57 deletions(-)
 create mode 160000 apps/lifeforge--achievements
 create mode 160000 apps/lifeforge--wallet
 delete mode 100644 packages/ui/src/components/inputs/LocationInput/components/LocationActionButton.tsx
 create mode 100644 packages/ui/src/components/inputs/LocationInput/components/LocationServiceStatusIndicator.tsx

diff --git a/apps/lifeforge--achievements b/apps/lifeforge--achievements
new file mode 160000
index 000000000..ae8688af6
--- /dev/null
+++ b/apps/lifeforge--achievements
@@ -0,0 +1 @@
+Subproject commit ae8688af6b51cc8b689a8fb07da1812c341f7b8b
diff --git a/apps/lifeforge--wallet b/apps/lifeforge--wallet
new file mode 160000
index 000000000..b2e2d807f
--- /dev/null
+++ b/apps/lifeforge--wallet
@@ -0,0 +1 @@
+Subproject commit b2e2d807f7ea24446ba0411600118e13e4f6bc2a
diff --git a/packages/ui/src/components/inputs/LocationInput/components/LocationActionButton.tsx b/packages/ui/src/components/inputs/LocationInput/components/LocationActionButton.tsx
deleted file mode 100644
index d8e111639..000000000
--- a/packages/ui/src/components/inputs/LocationInput/components/LocationActionButton.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { useTranslation } from 'react-i18next'
-
-import { Box, Icon, Text } from '@/components/primitives'
-
-import { Tooltip } from '../../../utilities'
-
-export function LocationActionButton({
-  enabled
-}: {
-  enabled: boolean | 'loading'
-}) {
-  const { t } = useTranslation('common.misc')
-
-  const showInfoIcon = !enabled || enabled === 'loading'
-
-  if (!showInfoIcon) return null
-
-  if (enabled === 'loading') {
-    return <Icon color={{ base: 'bg-500' }} icon="svg-spinners:ring-resize" />
-  }
-
-  return (
-    <Tooltip
-      clickable={true}
-      icon="tabler:info-circle"
-      id="location-disabled"
-      place="top-end"
-      positionStrategy="fixed"
-    >
-      <Box maxWidth="16rem">
-        <Text color={{ base: 'bg-500' }}>
-          {t('locationDisabled.description')}{' '}
-          <Text
-            as="a"
-            color="custom-500"
-            decoration="underline"
-            href="https://docs.lifeforge.melvinchia.dev/user-guide/api-keys#location"
-            rel="noopener noreferrer"
-            style={{ textDecorationThickness: '2px' }}
-            target="_blank"
-            weight="medium"
-          >
-            API Keys Guide
-          </Text>
-        </Text>
-      </Box>
-    </Tooltip>
-  )
-}
diff --git a/packages/ui/src/components/inputs/LocationInput/components/LocationServiceStatusIndicator.tsx b/packages/ui/src/components/inputs/LocationInput/components/LocationServiceStatusIndicator.tsx
new file mode 100644
index 000000000..7b89232de
--- /dev/null
+++ b/packages/ui/src/components/inputs/LocationInput/components/LocationServiceStatusIndicator.tsx
@@ -0,0 +1,55 @@
+import { useTranslation } from 'react-i18next'
+
+import { Box, Flex, Icon, Text } from '@/components/primitives'
+
+import { Tooltip } from '../../../utilities'
+
+export function LocationServiceStatusIndicator({
+  enabled
+}: {
+  enabled: boolean | 'loading'
+}) {
+  const { t } = useTranslation('common.misc')
+
+  const showInfoIcon = !enabled || enabled === 'loading'
+
+  if (!showInfoIcon) return null
+
+  if (enabled === 'loading') {
+    return (
+      <Flex centered height="100%">
+        <Icon color={{ base: 'bg-500' }} icon="svg-spinners:ring-resize" />
+      </Flex>
+    )
+  }
+
+  return (
+    <Flex centered height="100%">
+      <Tooltip
+        clickable={true}
+        icon="tabler:info-circle"
+        id="location-disabled"
+        place="top-end"
+        positionStrategy="fixed"
+      >
+        <Box maxWidth="16rem">
+          <Text color={{ base: 'bg-500' }}>
+            {t('locationDisabled.description')}{' '}
+            <Text
+              as="a"
+              color="custom-500"
+              decoration="underline"
+              href="https://docs.lifeforge.melvinchia.dev/user-guide/api-keys#location"
+              rel="noopener noreferrer"
+              style={{ textDecorationThickness: '2px' }}
+              target="_blank"
+              weight="medium"
+            >
+              API Keys Guide
+            </Text>
+          </Text>
+        </Box>
+      </Tooltip>
+    </Flex>
+  )
+}
diff --git a/packages/ui/src/components/inputs/LocationInput/index.tsx b/packages/ui/src/components/inputs/LocationInput/index.tsx
index de1ab7234..f815d773f 100644
--- a/packages/ui/src/components/inputs/LocationInput/index.tsx
+++ b/packages/ui/src/components/inputs/LocationInput/index.tsx
@@ -10,7 +10,7 @@ import { Box, Flex, Icon, Text } from '@/components/primitives'
 import { forgeAPI } from '@/utils/forgeAPI'
 
 import { useInputLabel } from '../shared/hooks/useInputLabel'
-import { LocationActionButton } from './components/LocationActionButton'
+import { LocationServiceStatusIndicator } from './components/LocationServiceStatusIndicator'
 
 export type Location = {
   name: string
@@ -133,13 +133,7 @@ export function LocationInput({
             ))}
         </ComboboxInput>
       </Box>
-      <Box
-        mr={variant === 'classic' ? 'lg' : 'md'}
-        mt="lg"
-        style={{ pointerEvents: 'all' }}
-      >
-        <LocationActionButton enabled={enabled} />
-      </Box>
+      <LocationServiceStatusIndicator enabled={enabled} />
     </Flex>
   )
 }