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

@@ -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>