Change settings

src/views/LiveView.vue

@@ -35,6 +35,7 @@
           class="card"
           :class="{ 'card--bh': c.kind==='bh', 'card--winner': c.isWinner }"
         >
+          <!-- Header: logo | title (trunc) | balance (no-wrap) -->
           <div class="card__header">
             <div class="card__logo">
               <img v-if="c.logo" :src="c.logo" alt="" />
@@ -42,27 +43,36 @@
               <span v-if="c.isWinner" class="card__badge" aria-label="Top performer">👑</span>
             </div>
 
-            <div class="card__title" :title="c.title">{{ c.title }}</div>
+            <div class="card__title-wrap">
+              <div class="card__title ellipsize" :title="c.title">{{ c.title }}</div>
+              <div class="card__subtitle ellipsize" :title="c.subtitle">{{ c.subtitle }}</div>
+            </div>
+
             <div class="card__balance">{{ fmtUSD(c.balance) }}</div>
           </div>
 
+          <!-- Meta row: strategy/badge on the left, performance pill on the right -->
           <div class="card__meta">
-            <div class="card__sub ellipsize" :title="c.subtitle">{{ c.subtitle }}</div>
+            <div class="meta__left">
+              <div v-if="c.kind==='bh'" class="pill pill--neutral">Buy&nbsp;&amp;&nbsp;Hold</div>
+              <div v-else class="pill pill--outline">Strategy</div>
+            </div>
 
-            <template v-if="c.kind==='agent' && c.gapUsd != null">
-              <div class="pill" :class="{ neg: c.gapUsd < 0 && !c.isWinner, pos: c.gapUsd >= 0 || c.isWinner }">
+            <div class="meta__right" v-if="c.kind==='agent' && c.gapUsd != null">
+              <div class="pill"
+                   :class="{ neg: c.gapUsd < 0 && !c.isWinner, pos: c.gapUsd >= 0 || c.isWinner }">
                 <span v-if="mode==='usd'">{{ signedMoney(c.gapUsd) }}</span>
                 <span v-else>{{ signedPct(c.gapPct) }}</span>
               </div>
-            </template>
-
-            <template v-else>
-              <div class="pill pill--neutral">Buy&nbsp;&amp;&nbsp;Hold</div>
-            </template>
+            </div>
+            <div class="meta__right" v-else>
+              <!-- spacer to keep height consistent -->
+            </div>
           </div>
 
+          <!-- Footer: EOD date -->
           <div class="card__footer">
-            <div class="card__sub">EOD {{ c.date ? new Date(c.date).toLocaleDateString() : '–' }}</div>
+            <div class="card__foot">EOD {{ c.date ? new Date(c.date).toLocaleDateString() : '–' }}</div>
           </div>
         </div>
       </div>
@@ -305,39 +315,82 @@ watchEffect(() => {
 @media (max-width: 1200px) { .cards5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
 @media (max-width: 720px)  { .cards5 { grid-template-columns: 1fr; } }
 
-/* card */
-.card { display: grid; grid-template-rows: auto auto auto; gap: 8px; padding: 12px 14px; border: 1px solid #EEF1F6; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); position: relative; }
+/* card container */
+.card {
+  display: grid;
+  grid-template-rows: auto auto auto; /* header, meta, footer */
+  gap: 10px;
+  padding: 12px 14px;
+  border: 1px solid #EEF1F6;
+  border-radius: 14px;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(0,0,0,.04);
+  min-width: 0; /* let children truncate */
+}
 .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 layout: logo | title | balance */
-.card__header { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; align-items: start; gap: 12px; }
+/* header grid: logo | title block | balance */
+.card__header {
+  display: grid;
+  grid-template-columns: 48px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 12px;
+}
 
 /* logo */
-.card__logo { width: 44px; height: 44px; border-radius: 999px; background: #F3F4F6; display: grid; place-items: center; overflow: hidden; position: relative; }
+.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 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: clamp to 2 lines so balance never overlaps */
+/* title block */
+.card__title-wrap { min-width: 0; display: grid; gap: 2px; }
 .card__title {
-  min-width: 0; font-weight: 800; color: #0F172A;
-  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
-  overflow: hidden; line-height: 1.15;
+  font-weight: 800; color: #0F172A; line-height: 1.1;
+  font-size: clamp(16px, 2vw, 20px); /* scale a bit with width */
+}
+.card__subtitle {
+  font-size: 12px; color: #5B6476; opacity: .85; line-height: 1.1;
 }
 
-/* right-side balance never shrinks */
-.card__balance { white-space: nowrap; font-weight: 900; color: #0F172A; font-size: 20px; }
+/* balance (never wraps) */
+.card__balance {
+  white-space: nowrap;
+  font-weight: 900; color: #0F172A;
+  font-size: clamp(18px, 2.2vw, 22px);
+  margin-left: 8px;
+}
 
-/* meta row + footer */
-.card__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
-.card__sub { font-size: 12px; color: #5B6476; opacity: .85; }
-.ellipsize { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* meta row */
+.card__meta {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  gap: 10px;
+}
+.meta__left, .meta__right { min-width: 0; display: flex; align-items: center; gap: 8px; }
+
+/* footer */
 .card__footer { margin-top: -2px; }
+.card__foot { font-size: 12px; color: #5B6476; opacity: .85; }
 
 /* pills */
-.pill { padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1; white-space: nowrap; background: #EEF2F7; color: #0F172A; }
-.pill.neg { background: #FEE2E2; color: #B91C1C; }
+.pill {
+  padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 800;
+  line-height: 1; white-space: nowrap; background: #EEF2F7; color: #0F172A;
+}
 .pill.pos { background: #DCFCE7; color: #166534; }
-.pill.pill--neutral { background: #EEF2F7; color: #0F172A; }
+.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>