diff --git a/web/src/components/buttons/ActionButton.svelte b/web/src/components/buttons/ActionButton.svelte index f64f73e3..022e6784 100644 --- a/web/src/components/buttons/ActionButton.svelte +++ b/web/src/components/buttons/ActionButton.svelte @@ -1,12 +1,10 @@ <script lang="ts"> export let id: string; - export let text: string = "Button"; export let click = () => { alert('no function assigned') }; </script> <button id={id} class="button" on:click={click}> <slot></slot> - {text} </button> <style> diff --git a/web/src/components/save/Omnibox.svelte b/web/src/components/save/Omnibox.svelte index 2e8a8027..8cebdcad 100644 --- a/web/src/components/save/Omnibox.svelte +++ b/web/src/components/save/Omnibox.svelte @@ -67,18 +67,20 @@ <div id="action-container"> <Switcher settingId="save-downloadMode"> - <ActionButton id="auto-mode-button" text="auto"> - <IconSparkles /> + <ActionButton id="auto-mode-button"> + <IconSparkles /> auto </ActionButton> - <ActionButton id="audio-mode-button" text="audio"> - <IconMusic /> + <ActionButton id="audio-mode-button"> + <IconMusic /> audio </ActionButton> - <ActionButton id="mute-mode-button" text="mute"> - <IconMute /> + <ActionButton id="mute-mode-button"> + <IconMute /> mute </ActionButton> </Switcher> - <ActionButton id="paste-button" click={pasteClipboard} text="paste"> + <ActionButton id="paste-button" click={pasteClipboard}> <IconClipboard /> + <span id="paste-desktop-text">paste</span> + <span id="paste-mobile-text">paste and download</span> </ActionButton> </div> </div> @@ -155,4 +157,27 @@ #action-container { justify-content: space-between; } + + #paste-mobile-text { + display: none; + } + + @media screen and (max-width: 440px) { + #action-container { + flex-direction: column; + gap: 5px; + } + + #action-container :global(.button) { + width: 100% + } + + #paste-mobile-text { + display: block; + } + + #paste-desktop-text { + display: none; + } + } </style>