feat: redesign quota summary for v0.3.0

frontend/src/styles.css

@@ -391,6 +391,37 @@ header p {
 .account-summary-metrics span {
   white-space: nowrap;
 }
+.account-summary-limits {
+  display: grid;
+  justify-content: end;
+  gap: 8px;
+  width: 100%;
+}
+.account-summary-limits.single {
+  justify-content: center;
+}
+.account-summary-limit {
+  display: grid;
+  grid-template-columns: minmax(76px, auto) 42px 28px minmax(92px, auto);
+  align-items: baseline;
+  gap: 6px;
+}
+.account-summary-limit-name {
+  color: var(--text);
+  font-weight: 650;
+}
+.account-summary-limit strong {
+  font-size: 16px;
+  text-align: right;
+}
+.account-summary-limit-remaining {
+  font-size: 12px;
+}
+.account-summary-limit-reset {
+  padding-left: 10px;
+  border-left: 1px solid var(--border);
+  text-align: left;
+}
 .account-chevron {
   flex: none;
   width: 20px;
@@ -1057,6 +1088,21 @@ a {
     justify-content: flex-start;
     gap: 6px 12px;
   }
+  .account-summary-limits {
+    justify-content: stretch;
+  }
+  .account-summary-limits.single {
+    justify-content: center;
+  }
+  .account-summary-limit {
+    grid-template-columns: auto auto auto minmax(0, 1fr);
+    gap: 4px;
+  }
+  .account-summary-limit-reset {
+    overflow: hidden;
+    padding-left: 6px;
+    text-overflow: ellipsis;
+  }
   .account-chevron {
     grid-column: 3;
     grid-row: 1;