further tweaks to metadata text size

nasa-jpl · Sep 10, 2024 · 0b39c17 · 0b39c17
1 parent 1b90b24
commit 0b39c17
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/packages/vue/src/components/MetadataEduResource/MetadataEduResource.vue b/packages/vue/src/components/MetadataEduResource/MetadataEduResource.vue
@@ -42,7 +42,7 @@ const time = computed(() => {
 <template>
   <div
     class="MetadataEduResource"
-    :class="{ '-compact text-sm lg:text-base': props.compact, 'text-body-lg': !props.compact }"
+    :class="{ '-compact text-sm xl:text-base': props.compact, 'text-body-lg': !props.compact }"
   >
     <div
       v-if="primarySubject"
@@ -69,7 +69,7 @@ const time = computed(() => {
     <div
       v-if="time && showTime"
       class="MetadataEduResourceItem"
-      :class="primarySubject && audience && time ? '-lgScreensOnly' : ''"
+      :class="primarySubject && audience && time ? '-xlScreensOnly' : ''"
     >
       <IconTime
         class="MetadataEduResourceIcon text-[1.15em]"
@@ -103,12 +103,13 @@ const time = computed(() => {
   }
 
   &.-compact {
-    @apply flex flex-grow;
+    @apply flex flex-grow flex-wrap;
     .MetadataEduResourceItem {
+      @apply whitespace-nowrap;
       @apply max-w-none min-w-[4em];
       @apply mr-6 mb-0;
-      &.-lgScreensOnly {
-        @apply hidden lg:flex;
+      &.-xlScreensOnly {
+        @apply hidden xl:flex;
       }
     }
   }

diff --git a/packages/vue/src/components/MetadataEvent/MetadataEvent.vue b/packages/vue/src/components/MetadataEvent/MetadataEvent.vue
@@ -76,7 +76,7 @@ const location = computed(() => {
   <div
     class="MetadataEvent"
     :class="{
-      '-compact text-sm lg:text-base': props.compact,
+      '-compact text-sm xl:text-base': props.compact,
       'text-body-lg': !props.compact,
       '-allow-break': props.allowBreak
     }"
@@ -173,8 +173,9 @@ const location = computed(() => {
   }
 
   &.-compact {
-    @apply flex flex-grow;
+    @apply flex flex-grow flex-wrap;
     .MetadataEventItem {
+      @apply whitespace-nowrap;
       @apply max-w-none min-w-[4em];
       @apply mr-6 mb-0;
     }