Replace ALT badge with info icon

ALT is just… too technical.

src/app.css

@@ -972,6 +972,12 @@ button.carousel-dot:is(.active, [disabled].active) {
   mask-image: linear-gradient(to bottom, transparent 0%, black 10px);
 }
 
+/* ICON */
+
+.icon {
+  flex-shrink: 0;
+}
+
 /* TAG */
 
 .tag {

src/components/icon.jsx

@@ -52,6 +52,7 @@ const ICONS = {
   list: 'mingcute:list-check-line',
   search: 'mingcute:search-2-line',
   hashtag: 'mingcute:hashtag-line',
+  info: 'mingcute:information-line',
 };
 
 const modules = import.meta.glob('/node_modules/@iconify-icons/mingcute/*.js');

src/components/media-modal.jsx

@@ -123,7 +123,7 @@ function MediaModal({
                     setShowMediaAlt(media.description);
                   }}
                 >
-                  <span class="tag">ALT</span>{' '}
+                  <Icon icon="info" />
                   <span class="media-alt-desc">{media.description}</span>
                 </button>
               )}

src/components/status.css

@@ -532,13 +532,13 @@
   text-align: left;
   border-radius: 8px;
   color: var(--text-color);
-  padding: 4px 8px 4px 4px;
+  padding: 4px 8px;
   border: 1px solid var(--outline-color);
   box-shadow: 0 4px 16px var(--outline-color);
   max-width: min(40em, calc(100% - 32px));
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 8px;
   font-size: 90%;
 }
 .carousel-item button.media-alt .media-alt-desc {
@@ -550,7 +550,7 @@
   box-orient: vertical;
   -webkit-line-clamp: 2;
   line-clamp: 2;
-  line-height: 1.2;
+  line-height: 1.4;
 }
 .carousel-item button.media-alt[hidden] {
   opacity: 0;