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,6 +111,8 @@ function TranslationBlock({
       detectedLang !== targetLangText
     ) {
       return (
+        <div class="shazam-container">
+          <div class="shazam-container-inner">
             <div class="status-translation-block-mini">
               <Icon
                 icon="translate"
@@ -124,6 +126,8 @@ function TranslationBlock({
                 {translatedContent}
               </output>
             </div>
+          </div>
+        </div>
       );
     }
     return null;