1 rem div img

src/components/IpSecurity.vue

@@ -29,22 +29,33 @@
         </div>
 
         <!-- Локация с флагом -->
-        <div class="flex items-center justify-center gap-2 text-xs text-gray-500 dark:text-gray-400">
+        <div class="flex items-center justify-center gap-1 text-xs text-gray-500 dark:text-gray-400">
+        <div class="flex h-4 justify-center">
           <img 
             v-if="flagUrl" 
             :src="flagUrl" 
             :alt="countryCode"
-            class="w-4 h-3 object-cover align-middle"
+            class="w-4 h-3 object-cover"
             @error="handleFlagError"
           />
-          <span v-if="ipData.location?.city" class="hidden sm:inline align-middle">{{ ipData.location.city }}</span>
-          <span v-if="ipData.location?.country" class="text-gray-600 dark:text-gray-300 font-medium align-middle">
-            {{ ipData.location.country }}
-          </span>
-          <span v-if="ipData.asn?.name" class="hidden md:inline text-gray-400 align-middle">
-            • {{ truncateText(ipData.asn.name, 30) }}
-          </span>
         </div>
+        
+        <template v-if="ipData.location?.city">
+          <span class="hidden sm:inline">{{ ipData.location.city }}</span>
+          <span class="text-gray-400 hidden sm:inline">•</span>
+        </template>
+        
+        <span v-if="ipData.location?.country" class="text-gray-600 dark:text-gray-300 font-medium">
+          {{ ipData.location.country }}
+        </span>
+        
+        <template v-if="ipData.asn?.name">
+          <span class="text-gray-400 hidden md:inline">•</span>
+          <span class="hidden md:inline text-gray-400">
+            {{ truncateText(ipData.asn.name, 30) }}
+          </span>
+        </template>
+      </div>
       </div>
     </div>
   </div>