fix: compact globe country card

Author: Oussama

website/src/lib/scenes/Scene2Globe.svelte

@@ -147,7 +147,7 @@
               <div>
                 <dt>Breadth</dt>
                 <dd>
-                  {selectedSummary.featured_artist_n_departments} departments · {selectedSummary.featured_artist_n_mediums}
+                  {selectedSummary.featured_artist_n_departments} departments / {selectedSummary.featured_artist_n_mediums}
                   media
                 </dd>
               </div>
@@ -160,12 +160,13 @@
               <span>{selectedWorkYear}</span>
             {/if}
           </p>
-          <p class="caveat">
-            This is a transparent collection-based proxy, not a true fame ranking.
-            {#if selectedSummary.featured_artist_score_method}
-              {selectedSummary.featured_artist_score_method}
-            {/if}
-          </p>
+          <p class="caveat">Collection-based proxy, not a true fame ranking.</p>
+          {#if selectedSummary.featured_artist_score_method}
+            <details class="score-method">
+              <summary>How score is computed</summary>
+              <p>{selectedSummary.featured_artist_score_method}</p>
+            </details>
+          {/if}
           {#if selectedArtistUrl}
             <a class="moma-link" href={selectedArtistUrl} target="_blank" rel="noopener">Open artist on MoMA</a>
           {/if}

website/src/lib/scenes/scene2Globe.css

@@ -75,8 +75,10 @@
   right: var(--space-4);
   top: var(--space-4);
   z-index: 3;
-  width: min(28rem, calc(100vw - var(--space-4)));
-  padding: var(--space-3);
+  width: min(23rem, calc(100vw - var(--space-4)));
+  max-height: calc(100vh - var(--space-4));
+  overflow: auto;
+  padding: var(--space-2);
   color: var(--fg-on-dark-strong);
   background: color-mix(in srgb, var(--bg-dark) 88%, transparent);
   border: 1px solid var(--fg-on-dark-mute);
@@ -102,17 +104,17 @@
 }
 
 .scene-globe h3 {
-  margin: var(--space-3) 0 var(--space-2);
+  margin: var(--space-2) 0 var(--space-1);
   color: var(--fg-on-dark-strong);
   font-family: var(--font-display);
-  font-size: var(--type-h2-size);
+  font-size: clamp(1.5rem, 3vw, 2rem);
 }
 
 .scene-globe dl {
   display: grid;
-  gap: var(--space-1);
+  gap: 0.375rem;
   margin: 0;
-  padding: var(--space-2) 0;
+  padding: var(--space-1) 0;
   border-top: 1px solid color-mix(in srgb, var(--fg-on-dark-mute) 34%, transparent);
   border-bottom: 1px solid color-mix(in srgb, var(--fg-on-dark-mute) 34%, transparent);
 }
@@ -136,7 +138,7 @@
 
 .artist-label {
   position: relative;
-  margin: var(--space-3) 0 0;
+  margin: var(--space-2) 0 0;
   padding: var(--space-2);
   background: color-mix(in srgb, var(--fg-on-dark-strong) 6%, transparent);
   border: 1px solid color-mix(in srgb, var(--fg-on-dark-mute) 42%, transparent);
@@ -169,8 +171,8 @@
 
 .artist-heading {
   display: grid;
-  grid-template-columns: 4rem 1fr;
-  gap: var(--space-2);
+  grid-template-columns: 3.25rem 1fr;
+  gap: var(--space-1);
   align-items: center;
   margin: var(--space-1) 0 var(--space-2);
 }
@@ -183,14 +185,14 @@
   border-radius: 50%;
   color: var(--accent-primary);
   font-family: var(--font-display);
-  font-size: var(--type-h2-size);
+  font-size: 1.35rem;
 }
 
 .artist-heading h4 {
   margin: 0;
   color: var(--fg-on-dark-strong);
   font-family: var(--font-display);
-  font-size: clamp(var(--type-h2-size), 4vw, var(--type-h1-size));
+  font-size: clamp(1.5rem, 3vw, 2rem);
   line-height: var(--type-h1-line);
 }
 
@@ -203,15 +205,15 @@
 
 .artist-label .story {
   margin: 0;
-  font-size: var(--type-body-size);
-  line-height: var(--type-body-line);
+  font-size: 0.9375rem;
+  line-height: 1.45;
 }
 
 .artist-label .score-card {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: var(--space-1);
-  margin: var(--space-2) 0 0;
+  margin: var(--space-1) 0 0;
   padding: var(--space-1) 0 0;
   border-top: 1px solid color-mix(in srgb, var(--fg-on-dark-mute) 28%, transparent);
 }
@@ -238,8 +240,8 @@
 .artist-label .representative {
   display: grid;
   gap: 0.125rem;
-  margin: var(--space-2) 0 0;
-  padding-top: var(--space-2);
+  margin: var(--space-1) 0 0;
+  padding-top: var(--space-1);
   border-top: 1px solid color-mix(in srgb, var(--fg-on-dark-mute) 28%, transparent);
   font-size: var(--type-small-size);
 }
@@ -259,6 +261,27 @@
   color: color-mix(in srgb, var(--fg-on-dark-mute) 76%, transparent);
 }
 
+.score-method {
+  margin-top: var(--space-1);
+  color: var(--fg-on-dark-mute);
+  font-family: var(--font-ui);
+  font-size: var(--type-small-size);
+}
+
+.score-method summary {
+  cursor: pointer;
+}
+
+.score-method summary:hover,
+.score-method summary:focus-visible {
+  color: var(--accent-primary);
+}
+
+.score-method p {
+  margin: var(--space-1) 0 0;
+  line-height: var(--type-small-line);
+}
+
 .moma-link {
   display: inline-flex;
   margin-top: var(--space-2);