From 68d6001880863d87779459189c627aa50e14248a Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sun, 9 Mar 2025 15:24:31 +0100
Subject: [PATCH] feat(ui): Improve ConnectionStatus responsive design

- Add responsive classes to ConnectionStatus badge
- Hide status text on mobile screens
- Conditionally display error message on larger screens
- Enhance badge styling with transparent background on mobile
---
 src/components/nostr/ConnectionStatus.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/nostr/ConnectionStatus.vue b/src/components/nostr/ConnectionStatus.vue
index f85bd6d..dad0f02 100644
--- a/src/components/nostr/ConnectionStatus.vue
+++ b/src/components/nostr/ConnectionStatus.vue
@@ -31,7 +31,10 @@ function getStatusColorSolid() {
 
 <template>
   <div class="flex items-center gap-2">
-    <Badge :variant="getStatusVariant()" class="flex items-center gap-1">
+    <Badge 
+      :variant="getStatusVariant()" 
+      class="flex items-center gap-1 border-0 bg-transparent sm:border sm:bg-[inherit]"
+    >
       <span class="relative flex h-2 w-2">
         <span 
           class="absolute inline-flex h-full w-full rounded-full opacity-75"
@@ -46,9 +49,9 @@ function getStatusColorSolid() {
           :class="getStatusColorSolid()"
         />
       </span>
-      <span class="text-[10px]">{{ getStatusText() }}</span>
+      <span class="hidden text-[10px] sm:inline">{{ getStatusText() }}</span>
     </Badge>
-    <p v-if="error" class="text-xs text-destructive">
+    <p v-if="error" class="hidden text-xs text-destructive sm:block">
       {{ error.message }}
     </p>
   </div>