More overflow fixes for p and li

rimutaka · Oct 22, 2024 · e6fd722 · e6fd722
1 parent 3d3247d
commit e6fd722
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 10 deletions.
diff --git a/vue/dist/assets/AboutView-D_2ieTXv.js → vue/dist/assets/AboutView-C_1mHv7N.js b/vue/dist/assets/AboutView-D_2ieTXv.js → vue/dist/assets/AboutView-C_1mHv7N.js
diff --git a/vue/dist/assets/index-CjOgxa7j.js → vue/dist/assets/index-BS--fOMk.js b/vue/dist/assets/index-CjOgxa7j.js → vue/dist/assets/index-BS--fOMk.js
diff --git a/vue/dist/assets/index-BTtm_E-T.css → vue/dist/assets/index-COG5zYle.css b/vue/dist/assets/index-BTtm_E-T.css → vue/dist/assets/index-COG5zYle.css
diff --git a/vue/dist/index.html b/vue/dist/index.html
@@ -5,8 +5,8 @@
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Bite-sized learning</title>
-    <script type="module" crossorigin src="/assets/index-CjOgxa7j.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-BTtm_E-T.css">
+    <script type="module" crossorigin src="/assets/index-BS--fOMk.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-COG5zYle.css">
   </head>
   <body>
     <div id="app"></div>

diff --git a/vue/src/assets/main.css b/vue/src/assets/main.css
@@ -76,9 +76,11 @@ footer a {
   @apply text-left w-full;
 }
 
-.q-card p {
-  max-width: 90vw; /* Chrome doesn't break up long URLs creating an overflow on small screens */
-  @apply break-words md:max-w-none;
+.q-card p, .q-card li {
+  /* Chrome doesn't break up long URLs creating an overflow on small screens */
+  overflow-wrap: anywhere;
+  max-width: 95vw; 
+  @apply md:max-w-none;
 }
 
 .q-card .q-text {
@@ -111,7 +113,7 @@ footer a {
 
 .q-card ul,
 .md-rendered ul {
-  @apply ps-2 list-disc list-inside mb-4;
+  @apply list-disc list-inside mb-4;
 }
 
 .md-rendered ul.markdown-prompt {