refine Semi UI mobile monitor

vehicle-data-platform/apps/web/src/v2/styles/workspace.css

@@ -11409,6 +11409,10 @@
 }
 
 @media (max-width: 760px) {
+  .v2-monitor-filter-fields.is-mobile-collapsed {
+    display: none;
+  }
+
   .v2-filterbar > .semi-card-body {
     display: grid;
     gap: 8px;
@@ -11439,24 +11443,106 @@
     display: grid;
     width: 100%;
     min-width: 0;
-    grid-template-columns: auto minmax(0, 1fr) auto;
+    grid-template-columns: 70px minmax(0, 1fr) 42px;
     gap: 7px;
   }
 
-  .v2-filter-live-status {
-    width: 40px;
-    height: 40px;
-    padding: 0;
+  .v2-monitor-filter-toggle.semi-button {
+    width: 70px;
+    height: 42px;
+    justify-content: center;
+    gap: 5px;
+    border-color: #d7e2ef;
+    border-radius: 9px;
+    background: #f6f9fd;
+    color: #52677f;
+    padding: 0 8px;
+    font-size: 11px;
+    font-weight: 700;
   }
 
-  .v2-filter-live-status-label {
-    display: none;
+  .v2-monitor-filter-toggle.semi-button[aria-expanded="true"],
+  .v2-monitor-filter-toggle.semi-button.has-filters {
+    border-color: #b7cff0;
+    background: #edf5ff;
+    color: #2465b7;
   }
 
-  .v2-filter-live-status b {
-    position: absolute;
-    top: -3px;
-    right: -3px;
+  .v2-monitor-filter-toggle.semi-button b {
+    display: inline-grid;
+    min-width: 18px;
+    height: 18px;
+    place-items: center;
+    border-radius: 9px;
+    background: #1268f3;
+    color: #fff;
+    font-size: 9px;
+    line-height: 1;
+  }
+
+  .v2-filterbar > .semi-card-body:has(.v2-monitor-filter-fields.is-mobile-collapsed) {
+    gap: 0;
+    padding: 6px;
+  }
+
+  .v2-monitor-mobile-card .semi-card-body {
+    padding: 8px 9px;
+  }
+
+  .v2-monitor-card-heading-actions {
+    display: flex !important;
+    flex: 0 0 auto;
+    align-items: center;
+    flex-direction: row !important;
+    gap: 7px !important;
+  }
+
+  .v2-monitor-card-heading-actions > b {
+    color: #1f4f8d;
+    font-size: 16px;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .v2-monitor-card-heading-actions > b small {
+    margin-left: 3px;
+    color: #8996a8;
+    font-size: 8px;
+    font-weight: 500;
+  }
+
+  .v2-monitor-card-heading-actions > .v2-monitor-card-locate.semi-button {
+    width: 52px;
+    height: 30px;
+    min-height: 30px;
+    border-radius: 7px;
+    padding: 0 7px;
+    font-size: 10px;
+  }
+
+  .v2-monitor-mobile-cards dl {
+    gap: 4px 9px;
+    margin-top: 6px;
+    padding-top: 6px;
+  }
+
+  .v2-monitor-mobile-cards dl > div {
+    min-height: 26px;
+  }
+
+  .v2-monitor-mobile-cards dl > div.is-address {
+    min-height: 32px;
+  }
+
+  .v2-monitor-mobile-cards dt {
+    font-size: 8px;
+  }
+
+  .v2-monitor-mobile-cards dd {
+    font-size: 10px;
+  }
+
+  .v2-monitor-mobile-cards > .v2-monitor-mobile-card.semi-card {
+    contain-intrinsic-size: auto 154px;
   }
 
   .v2-monitor-mode.v2-segmented-tabs {