Change settings

src/views/LiveView.vue

@@ -40,14 +40,15 @@
 
           <!-- TOP ROW: avatar + titles + primary metric -->
           <div class="card2__row card2__row--top">
-            <div class="avatar">
-              <img v-if="c.logo" :src="c.logo" alt="" />
-              <div v-else class="avatar__fallback" aria-hidden="true"></div>
-            </div>
-
-            <div class="titles">
-              <div class="title" :title="c.title">{{ c.title }}</div>
-              <div class="subtitle" :title="c.subtitle">{{ c.subtitle }}</div>
+            <div class="info">
+              <div class="avatar">
+                <img v-if="c.logo" :src="c.logo" alt="" />
+                <div v-else class="avatar__fallback" aria-hidden="true"></div>
+              </div>
+              <div class="titles">
+                <div class="title" :title="c.title">{{ c.title }}</div>
+                <div class="subtitle" :title="c.subtitle">{{ c.subtitle }}</div>
+              </div>
             </div>
 
             <div class="metrics">
@@ -354,16 +355,13 @@ watch(
 .avatar__fallback { width: 60%; height: 60%; border-radius: 999px; background: #E5E7EB; }
 
 /* titles */
+.titles { min-width: 0; display: grid; gap: 2px; }
 .title {
-  font-weight: 800;
-  font-size: 1rem;
-  color: #0F172A;
-}
-.subtitle {
-  font-size: 0.85rem;
-  color: #64748B;
+  font-weight: 800; color: #0F172A; line-height: 1.15;
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+  overflow: hidden; font-size: clamp(16px, 1.4vw, 18px);
 }
-.titles { min-width: 0; display: grid; gap: 2px; }
+.subtitle { font-size: 12px; color: #5B6476; opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
 /* primary metric */
 .primary { text-align: right; }