Compact server cards for wide screens

public/styles.css

@@ -302,26 +302,26 @@ h2 {
 
 .server-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
-  grid-auto-rows: minmax(370px, auto);
-  gap: 20px;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
+  grid-auto-rows: minmax(340px, auto);
+  gap: 14px;
   align-items: stretch;
   flex: 1 1 auto;
   min-height: 0;
   overflow-y: auto;
-  padding: 2px 10px 24px 2px;
+  padding: 2px 8px 18px 2px;
 }
 
 .server-card {
   position: relative;
   display: flex;
   flex-direction: column;
-  min-height: 370px;
+  min-height: 340px;
   min-width: 0;
   border: 1px solid var(--line);
   border-radius: 12px;
   background: #fff;
-  padding: 13px;
+  padding: 12px;
   transition: box-shadow 0.16s ease, border-color 0.16s ease;
 }
 
@@ -392,18 +392,18 @@ h2 {
 
 .gpu-ring {
   display: grid;
-  grid-template-columns: 72px 1fr;
+  grid-template-columns: 64px 1fr;
   align-items: center;
-  gap: 12px;
-  margin: 12px 0;
+  gap: 10px;
+  margin: 10px 0;
 }
 
 .donut {
   position: relative;
   display: grid;
   place-items: center;
-  width: 72px;
-  height: 72px;
+  width: 64px;
+  height: 64px;
   border-radius: 50%;
   background: conic-gradient(var(--level-color, var(--green)) var(--busy, 0%), #dfe8ec 0);
 }
@@ -411,8 +411,8 @@ h2 {
 .donut::before {
   content: "";
   position: absolute;
-  width: 50px;
-  height: 50px;
+  width: 44px;
+  height: 44px;
   border-radius: 50%;
   background: #fff;
 }
@@ -425,7 +425,7 @@ h2 {
 
 .summary strong {
   display: block;
-  font-size: 21px;
+  font-size: 19px;
   overflow-wrap: anywhere;
 }
 
@@ -443,12 +443,12 @@ h2 {
 
 .gpu-chip {
   display: grid;
-  grid-template-rows: 16px 1fr;
-  gap: 4px;
-  min-height: 70px;
+  grid-template-rows: 14px 1fr;
+  gap: 3px;
+  min-height: 64px;
   border: 1px solid #cfe7dd;
   border-radius: 8px;
-  padding: 4px;
+  padding: 3px;
   font-size: 10px;
   font-weight: 800;
   background: #e8f5ef;
@@ -507,7 +507,7 @@ h2 {
   align-content: center;
   justify-items: center;
   min-width: 0;
-  min-height: 44px;
+  min-height: 40px;
   overflow: hidden;
   border-radius: 6px;
   background: rgba(255, 255, 255, 0.78);
@@ -568,17 +568,25 @@ h2 {
   flex-wrap: wrap;
   gap: 6px;
   align-items: center;
-  margin-top: auto;
-  padding-top: 14px;
+  min-width: 0;
+  max-width: 100%;
+  margin-top: 12px;
 }
 
 .tag {
+  max-width: 100%;
   border-radius: 999px;
   background: #eef6f6;
   color: var(--teal-dark);
   padding: 4px 8px;
   font-size: 12px;
   font-weight: 700;
+  overflow-wrap: anywhere;
+}
+
+.edit-card {
+  flex: 0 0 auto;
+  margin-left: auto;
 }
 
 .detail {