Merge pull request #221 from RyanCoulsonCA/fix-340

fix long names adding a horizontal scrollbar to app
ramp4-pcar4 · May 26, 2023 · 910a6ec · 910a6ec
2 parents 57412a8 + aa48f37
commit 910a6ec
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/src/components/editor/preview.vue b/src/components/editor/preview.vue
@@ -9,7 +9,9 @@
     <div v-else-if="loadStatus === 'loaded'">
         <div class="storyramp-app bg-white" v-if="config !== undefined">
             <header class="sticky top-0 z-50 flex border-b border-black bg-gray-200 py-2 px-2 justify-between">
-                <span class="font-semibold text-lg m-1">{{ config.title }}</span>
+                <div class="w-mobile-full truncate">
+                    <span class="font-semibold text-lg m-1">{{ config.title }}</span>
+                </div>
             </header>
 
             <introduction :config="config.introSlide" :configFileStructure="configFileStructure"></introduction>
@@ -142,5 +144,15 @@ $font-list: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     .prose a:not([panel])::after {
         content: url('../../assets/popout.svg');
     }
+
+    .w-mobile-full {
+        width: 80%;
+    }
+}
+
+@media screen and (max-width: 640px) {
+    .w-mobile-full {
+        width: 100% !important;
+    }
 }
 </style>
diff --git a/src/components/story/story.vue b/src/components/story/story.vue
@@ -25,7 +25,7 @@
                         :slides="config.slides"
                         :lang="lang"
                     />
-                    <div class="flex-none font-semibold">
+                    <div class="flex-none w-mobile-full truncate font-semibold">
                         <span class="text-lg">{{ config.title }}</span>
                     </div>
                     <div class="flex justify-end flex-auto space-x-6">
@@ -180,11 +180,18 @@ $font-list: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     .prose a:not([panel])::after {
         content: url('../../assets/popout.svg');
     }
+
+    .w-mobile-full {
+        width: 80%;
+    }
 }
 
 @media screen and (min-width: 640px) {
     .mobile-menu {
         display: none !important;
     }
+    .w-mobile-full {
+        width: 100% !important;
+    }
 }
 </style>