Change settings

src/views/LiveView.vue

@@ -311,11 +311,13 @@ watchEffect(() => {
 .empty { padding: 14px; border: 1px dashed #D6DAE1; border-radius: 12px; color: #6B7280; font-size: .92rem; }
 
 /* 5 cards in a row */
+/* grid of 5 cards */
 .cards5 { display: grid; gap: 12px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
-@media (max-width: 1200px) { .cards5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
-@media (max-width: 720px)  { .cards5 { grid-template-columns: 1fr; } }
+@media (max-width: 1280px) { .cards5 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
+@media (max-width: 960px)  { .cards5 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
+@media (max-width: 640px)  { .cards5 { grid-template-columns: 1fr; } }
 
-/* card container */
+/* card shell */
 .card {
   display: grid;
   grid-template-rows: auto auto auto; /* header, meta, footer */
@@ -325,45 +327,60 @@ watchEffect(() => {
   border-radius: 14px;
   background: #fff;
   box-shadow: 0 1px 2px rgba(0,0,0,.04);
-  min-width: 0; /* let children truncate */
+  min-width: 0; /* allow truncation inside */
 }
 .card--bh { outline: 2px dashed rgba(15,23,42,.08); }
 .card--winner { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.12); }
 
-/* header grid: logo | title block | balance */
+/* HEADER — responsive grid areas
+   wide:  "logo title balance"
+   tight: "logo title balance"
+           "logo .     balance"
+*/
 .card__header {
   display: grid;
-  grid-template-columns: 48px minmax(0, 1fr) auto;
+  grid-template-columns: 48px minmax(0,1fr) auto;
+  grid-template-areas: "logo title balance";
   align-items: center;
-  gap: 12px;
+  column-gap: 12px;
+  row-gap: 6px;
+}
+@media (max-width: 1200px) {
+  .card__header {
+    grid-template-areas:
+      "logo title balance"
+      "logo .     balance"; /* balance gets its own row when tight */
+  }
 }
 
 /* logo */
-.card__logo {
-  width: 44px; height: 44px; border-radius: 999px;
-  background: #F3F4F6; display: grid; place-items: center;
-  overflow: hidden; position: relative; flex: 0 0 44px;
-}
+.card__logo { grid-area: logo; width: 44px; height: 44px; border-radius: 999px; background: #F3F4F6;
+  display: grid; place-items: center; overflow: hidden; position: relative; }
 .card__logo img { width: 100%; height: 100%; object-fit: contain; }
 .card__logo-fallback { width: 60%; height: 60%; border-radius: 999px; background: #E5E7EB; }
 .card__badge { position: absolute; right: -6px; top: -6px; font-size: 16px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
 
 /* title block */
-.card__title-wrap { min-width: 0; display: grid; gap: 2px; }
+.card__title-wrap { grid-area: title; min-width: 0; display: grid; gap: 2px; }
 .card__title {
-  font-weight: 800; color: #0F172A; line-height: 1.1;
-  font-size: clamp(16px, 2vw, 20px); /* scale a bit with width */
+  font-weight: 800; color: #0F172A; line-height: 1.15;
+  /* two-line clamp to avoid 'Bu…' / 'Invest…' */
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+  overflow: hidden;
+  font-size: clamp(16px, 1.6vw, 19px);
 }
 .card__subtitle {
   font-size: 12px; color: #5B6476; opacity: .85; line-height: 1.1;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
 
-/* balance (never wraps) */
+/* balance (never wraps; can move to its own row on tight cards) */
 .card__balance {
+  grid-area: balance;
   white-space: nowrap;
   font-weight: 900; color: #0F172A;
-  font-size: clamp(18px, 2.2vw, 22px);
-  margin-left: 8px;
+  font-size: clamp(18px, 1.9vw, 22px);
+  align-self: start;
 }
 
 /* meta row */
@@ -387,10 +404,4 @@ watchEffect(() => {
 .pill.pos { background: #DCFCE7; color: #166534; }
 .pill.neg { background: #FEE2E2; color: #B91C1C; }
 .pill--neutral { background: #EEF2F7; color: #0F172A; }
-.pill--outline {
-  background: transparent; color: #475569; border: 1px solid #E5E7EB; padding: 3px 8px;
-}
-
-/* utilities */
-.ellipsize { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-</style>
+.pill--outline { background: transparent; color: #475569; border: 1px solid #E5E7EB; padding: 3px 8px; }