From bbb60c847c4d377d48e2fe6814c2107ba6ef85b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Tue, 17 Dec 2024 19:02:37 +0100
Subject: [PATCH] Truncate ExtendedTextarea caption on smaller viewports

---
 src/components/ExtendedTextarea.svelte | 22 ++++++++--------------
 src/components/Icon.svelte             |  7 ++++++-
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/components/ExtendedTextarea.svelte b/src/components/ExtendedTextarea.svelte
index 7c673d6f6..50c0436ce 100644
--- a/src/components/ExtendedTextarea.svelte
+++ b/src/components/ExtendedTextarea.svelte
@@ -217,14 +217,6 @@
     gap: 0.5rem;
   }
 
-  .caption {
-    font-size: var(--font-size-small);
-    color: var(--color-fill-gray);
-    display: flex;
-    flex-wrap: wrap;
-    align-items: flex-start;
-    gap: 0.25rem;
-  }
   .preview {
     width: 100%;
     font-size: var(--font-size-small);
@@ -268,13 +260,15 @@
       <span class="global-hide-on-small-desktop-down">Discard</span>
     </OutlineButton>
     {#if !preview}
-      <div class="caption">
+      <div
+        class="txt-overflow txt-small txt-missing"
+        title={`Drag and drop files to add them. Markdown is supported. Press ${utils.modifierKey()}↵ to submit.`}>
         Drag and drop files to add them.
-        <div style="display: flex; align-items: center; gap: 0.25rem;">
-          <Icon name="markdown" />
-          Markdown is supported.
-        </div>
-        Press {utils.modifierKey()}↵ to submit.
+        <Icon
+          name="markdown"
+          styleDisplay="inline"
+          styleVerticalAlign="text-top" />
+        Markdown is supported. Press {utils.modifierKey()}↵ to submit.
       </div>
     {/if}
     <div class="buttons">
diff --git a/src/components/Icon.svelte b/src/components/Icon.svelte
index 16811807f..24b1e6177 100644
--- a/src/components/Icon.svelte
+++ b/src/components/Icon.svelte
@@ -5,6 +5,8 @@
     size?: "16" | "32";
     onclick?: () => void;
     disabled?: boolean;
+    styleDisplay?: string;
+    styleVerticalAlign?: string;
     name:
       | "attachment"
       | "arrow-left"
@@ -50,12 +52,13 @@
     onclick = undefined,
     name,
     disabled = false,
+    styleDisplay = "flex",
+    styleVerticalAlign = undefined,
   }: Props = $props();
 </script>
 
 <style>
   svg {
-    display: flex;
     flex-shrink: 0;
     -webkit-touch-callout: none;
     -webkit-user-select: none;
@@ -76,6 +79,8 @@
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <svg
   style:cursor={onclick && !disabled ? "pointer" : "inherit"}
+  style:display={styleDisplay}
+  style:vertical-align={styleVerticalAlign}
   class:hoverable={onclick}
   class:disabled
   role="img"