Merge pull request #195 from cheeaun/main

Update from main

src/app.css

@@ -2000,7 +2000,7 @@ ul.link-list li a .icon {
     transform: none;
     pointer-events: auto;
   }
-  #columns li:has(.status-carousel) {
+  #columns li.timeline-item-carousel {
     width: auto;
     transform: none;
   }
@@ -2159,7 +2159,7 @@ ul.link-list li a .icon {
   /* :is(.carousel-top-controls, .carousel-controls) {
     padding: 32px;
   } */
-  li:has(.status-carousel) {
+  li.timeline-item-carousel {
     width: 95vw;
     max-width: calc(320px * 3.3);
     transform: translateX(calc(-50% + 20em));

src/components/status.css

@@ -520,6 +520,10 @@
   margin-inline: 0;
   padding-inline-start: 1.5em;
 }
+.status .content > :is(ul, ol) li > :is(ul, ol),
+.status .content > div > :is(ul, ol) li > :is(ul, ol) {
+  padding-inline-start: 1.5em;
+}
 .status .content ul {
   list-style-type: disc;
 }

src/components/timeline.jsx

@@ -365,7 +365,10 @@ function Timeline({
                       return 0;
                     });
                     return (
-                      <li key={`timeline-${statusID}`}>
+                      <li
+                        key={`timeline-${statusID}`}
+                        class="timeline-item-carousel"
+                      >
                         <StatusCarousel
                           title={title}
                           class={`${type}-carousel`}

src/components/translation-block.jsx

@@ -111,18 +111,22 @@ function TranslationBlock({
       detectedLang !== targetLangText
     ) {
       return (
-        <div class="status-translation-block-mini">
+        <div class="shazam-container">
-          <Icon
+          <div class="shazam-container-inner">
-            icon="translate"
+            <div class="status-translation-block-mini">
-            alt={`Auto-translated from ${sourceLangText}`}
+              <Icon
-          />
+                icon="translate"
-          <output
+                alt={`Auto-translated from ${sourceLangText}`}
-            lang={targetLang}
+              />
-            dir="auto"
+              <output
-            title={pronunciationContent || ''}
+                lang={targetLang}
-          >
+                dir="auto"
-            {translatedContent}
+                title={pronunciationContent || ''}
-          </output>
+              >
+                {translatedContent}
+              </output>
+            </div>
+          </div>
         </div>
       );
     }