used Tooltip for the sidebar metadeta

Author: psg-19

app/components/crate-sidebar.css

@@ -2,7 +2,7 @@
     display: flex;
     flex-direction: column;
 
-    > * + * {
+    >*+* {
         margin-top: var(--space-m);
     }
 }
@@ -13,16 +13,11 @@
 }
 
 .metadata {
-    > * + * {
+    >*+* {
         margin-top: var(--space-2xs);
     }
 }
 
-._label {
-    font-weight: 500;
-    margin-right: 0.2rem;
-}
-
 .date,
 .msrv,
 .edition,
@@ -45,7 +40,7 @@
 .msrv,
 .edition,
 .linecount {
-    > span {
+    >span {
         cursor: help;
     }
 }
@@ -90,7 +85,7 @@
 .purl-tooltip {
     word-break: break-all;
 
-    > small {
+    >small {
         word-break: normal;
     }
 }
@@ -116,7 +111,7 @@
 }
 
 .links {
-    > * + * {
+    >*+* {
         margin-top: var(--space-m);
     }
 }
@@ -127,7 +122,8 @@
     line-height: 1.5;
 }
 
-.report-button, .playground-button {
+.report-button,
+.playground-button {
     justify-content: center;
     width: 220px;
 }
@@ -140,4 +136,4 @@
     max-width: 220px;
     text-align: justify;
     line-height: 1.3em;
-}
+}

app/components/crate-sidebar.gjs

@@ -68,9 +68,11 @@ export default class CrateSidebar extends Component {
         <time datetime={{dateFormatIso @version.created_at}} class='date' data-test-date-label>
           {{svgJar 'calendar'}}
           <span>
-            <span class='_label'>Last Updated</span>
             {{dateFormatDistanceToNow @version.created_at addSuffix=true}}
-            <Tooltip @text={{dateFormat @version.created_at 'PPP'}} />
+            <Tooltip>
+              Last Updated:
+              {{dateFormat @version.created_at 'PPP'}}
+            </Tooltip>
           </span>
         </time>
 
@@ -110,10 +112,10 @@ export default class CrateSidebar extends Component {
         {{/if}}
 
         {{#if @version.crate_size}}
-          <div class='bytes' data-test-byte-size-label>
+          <div class='bytes' data-test-byte-size>
             {{svgJar 'weight'}}
-            <span class='_label'>Size</span>
             {{prettyBytes @version.crate_size}}
+            <Tooltip @text='Crate Size' />
           </div>
         {{/if}}
 

tests/acceptance/crate-test.js

@@ -312,12 +312,12 @@ module('Acceptance | crate page', function (hooks) {
 
     await visit('/crates/foo');
     assert.dom('[data-test-linecounts]').hasText('1,119 SLoC');
-    assert.dom('[data-test-date-label]').includesText('Last Updated');
-    assert.dom('[data-test-byte-size-label]').includesText('Size');
+    assert.dom('[data-test-date-ts]').exists();
+    assert.dom('[data-test-byte-size]').exists();
 
     await visit('/crates/foo/0.5.0');
     assert.dom('[data-test-linecounts]').hasText('520 SLoC');
-    assert.dom('[data-test-date-label]').includesText('Last Updated');
-    assert.dom('[data-test-byte-size-label]').includesText('Size');
+    assert.dom('[data-test-date-ts]').exists();
+    assert.dom('[data-test-byte-size]').exists();
   });
 });