From a71de3eede72205219035fae14ca28ff1aca159d Mon Sep 17 00:00:00 2001
From: Akino <akinochen@foxmail.com>
Date: Fri, 11 Apr 2025 13:29:09 +0000
Subject: [PATCH] fix(dashboard): adjust layout and improve responsiveness in
 Nginx dashboard

---
 app/src/views/dashboard/NginxDashBoard.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/src/views/dashboard/NginxDashBoard.vue b/app/src/views/dashboard/NginxDashBoard.vue
index 83928e3d..ba0d3c04 100644
--- a/app/src/views/dashboard/NginxDashBoard.vue
+++ b/app/src/views/dashboard/NginxDashBoard.vue
@@ -104,9 +104,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <div>
+  <div class="max-w-full of-x-hidden">
     <!-- Top operation bar -->
-    <div class="mb-4 mx-6 md:mx-0 flex flex-wrap justify-between items-center">
+    <div class="mb-4 mx-6 md:mx-0 flex flex-wrap gap-4 justify-between items-center">
       <div class="flex items-center">
         <ABadge :status="status === NginxStatus.Running ? 'success' : 'error'" />
         <span class="font-medium">{{ status === NginxStatus.Running ? $gettext('Nginx is running') : $gettext('Nginx is not running') }}</span>
@@ -191,12 +191,12 @@ onMounted(() => {
 
         <ARow :gutter="[16, 16]" class="mb-4">
           <!-- Metrics card -->
-          <ACol :sm="24" :lg="12">
+          <ACol :xs="24" :sm="24" :lg="12">
             <ConnectionMetricsCard :nginx-info="nginxInfo" />
           </ACol>
 
           <!-- CPU and memory usage -->
-          <ACol :sm="24" :lg="12">
+          <ACol :xs="24" :sm="24" :lg="12">
             <ResourceUsageCard :nginx-info="nginxInfo" />
           </ACol>
         </ARow>