ExploreMetrics: Improve semantic HTML and remove unused styles (#97367)

Chore: Code cleanup

public/app/features/trails/DataTrailBookmarks.tsx

@@ -84,12 +84,8 @@ function getStyles(theme: GrafanaTheme2) {
     header: css({
       color: theme.colors.text.primary,
       textAlign: 'center',
-      /* H4 */
-      fontFamily: 'Inter',
       fontSize: '18px',
-      fontStyle: 'normal',
-      fontWeight: '400',
-      lineHeight: '22px' /* 122.222% */,
+      lineHeight: '22px',
       letterSpacing: '0.045px',
     }),
     horizontalLine: css({

public/app/features/trails/DataTrailCard.tsx

@@ -59,7 +59,7 @@ export function DataTrailCard(props: Props) {
   const { filters, metric, createdAt } = values;
 
   return (
-    <div>
+    <article>
       <Card onClick={onSelect} className={styles.card}>
         <Card.Heading>
           <div className={styles.metricValue}>{truncateValue('', getMetricName(metric), 39)}</div>
@@ -93,34 +93,18 @@ export function DataTrailCard(props: Props) {
         </div>
         <div className={styles.primaryFont}>{createdAt && dateTimeFormat(createdAt, { format: 'YYYY-MM-DD' })}</div>
       </div>
-    </div>
+    </article>
   );
 }
 
 export function getStyles(theme: GrafanaTheme2) {
   return {
-    metricLabel: css({
-      display: 'inline',
-      color: theme.colors.text.primary,
-      fontFamily: 'Inter',
-      fontSize: '14px',
-      fontStyle: 'normal',
-      fontWeight: 400,
-    }),
     metricValue: css({
       display: 'inline',
       color: theme.colors.text.primary,
-      fontFamily: 'Inter',
-      fontSize: '14px',
-      fontStyle: 'normal',
       fontWeight: 500,
       wordBreak: 'break-all',
     }),
-    tag: css({
-      maxWidth: '260px',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-    }),
     card: css({
       position: 'relative',
       width: '318px',
@@ -159,19 +143,14 @@ export function getStyles(theme: GrafanaTheme2) {
     primaryFont: css({
       display: 'inline',
       color: theme.colors.text.primary,
-      fontFamily: 'Inter',
       fontSize: '12px',
-      fontStyle: 'normal',
       fontWeight: '500',
-      lineHeight: '18px' /* 150% */,
       letterSpacing: '0.018px',
     }),
     secondaryFont: css({
       display: 'inline',
       color: theme.colors.text.secondary,
-      fontFamily: 'Inter',
       fontSize: '12px',
-      fontStyle: 'normal',
       fontWeight: '400',
       lineHeight: '18px' /* 150% */,
       letterSpacing: '0.018px',
@@ -181,9 +160,5 @@ export function getStyles(theme: GrafanaTheme2) {
       bottom: theme.spacing(1),
       right: theme.spacing(1),
     }),
-    wordwrap: css({
-      overflow: 'hidden',
-      overflowWrap: 'anywhere',
-    }),
   };
 }

public/app/features/trails/DataTrailsApp.tsx

@@ -155,6 +155,7 @@ export function getDataTrailsApp() {
 const getStyles = () => ({
   topNavContainer: css({
     width: '100%',
+    height: '100%',
     display: 'flex',
     flexDirection: 'row',
     justifyItems: 'flex-start',

public/app/features/trails/DataTrailsHome.tsx

@@ -57,8 +57,8 @@ export class DataTrailsHome extends SceneObjectBase<DataTrailsHomeState> {
     };
 
     return (
-      <div className={styles.container}>
-        <div className={styles.homepageBox}>
+      <article className={styles.container}>
+        <section className={styles.homepageBox}>
           <Stack direction="column" alignItems="center">
             <div>{theme.isDark ? <DarkModeRocket /> : <LightModeRocket />}</div>
             <Text element="h1" textAlignment="center" weight="medium">
@@ -87,10 +87,10 @@ export class DataTrailsHome extends SceneObjectBase<DataTrailsHomeState> {
               </Button>
             </div>
           </Stack>
-        </div>
+        </section>
         <DataTrailsRecentMetrics onSelect={model.onSelectRecentTrail} />
         <DataTrailsBookmarks onSelect={model.onSelectBookmark} onDelete={onDelete} />
-      </div>
+      </article>
     );
   };
 }

public/app/features/trails/DataTrailsRecentMetrics.tsx

@@ -64,12 +64,8 @@ function getStyles(theme: GrafanaTheme2) {
     header: css({
       color: theme.colors.text.primary,
       textAlign: 'center',
-      /* H4 */
-      fontFamily: 'Inter',
       fontSize: '18px',
-      fontStyle: 'normal',
       fontWeight: '400',
-      lineHeight: '22px' /* 122.222% */,
       letterSpacing: '0.045px',
     }),
     trailList: css({