From 75d23fe135d0e92a32802866e5b0c977b9967a55 Mon Sep 17 00:00:00 2001
From: Snowknight26 <Snowknight26@users.noreply.github.com>
Date: Mon, 24 Nov 2025 10:24:02 -0600
Subject: [PATCH] fix(web): fix support & feedback modal wrapping (#24018)

* fix(web): fix support & feedback modal wrapping

* Fix reference
---
 .../lib/modals/HelpAndFeedbackModal.svelte    | 97 ++++++-------------
 1 file changed, 30 insertions(+), 67 deletions(-)

diff --git a/web/src/lib/modals/HelpAndFeedbackModal.svelte b/web/src/lib/modals/HelpAndFeedbackModal.svelte
index f25f7d1704..8b73978672 100644
--- a/web/src/lib/modals/HelpAndFeedbackModal.svelte
+++ b/web/src/lib/modals/HelpAndFeedbackModal.svelte
@@ -2,7 +2,7 @@
   import { type ServerAboutResponseDto } from '@immich/sdk';
   import { Icon, Modal, ModalBody } from '@immich/ui';
   import { mdiBugOutline, mdiFaceAgent, mdiGit, mdiGithub, mdiInformationOutline } from '@mdi/js';
-  import { siDiscord } from 'simple-icons';
+  import { type SimpleIcon, siDiscord } from 'simple-icons';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -13,94 +13,57 @@
   let { onClose, info }: Props = $props();
 </script>
 
+{#snippet link(url: string, icon: string | SimpleIcon, text: string)}
+  <div>
+    <a href={url} target="_blank" rel="noreferrer">
+      <Icon {icon} size="1.5em" class="inline-block" />
+      <p class="font-medium text-primary text-sm underline inline-block">
+        {text}
+      </p>
+    </a>
+  </div>
+{/snippet}
+
 <Modal title={$t('support_and_feedback')} {onClose} size="small">
   <ModalBody>
     <p>{$t('official_immich_resources')}</p>
-    <div class="flex flex-col sm:grid sm:grid-cols-2 gap-2 mt-5">
-      <div>
-        <a href="https://docs.{info.version}.archive.immich.app/overview/introduction" target="_blank" rel="noreferrer">
-          <Icon icon={mdiInformationOutline} size="1.5em" class="inline-block" />
-          <p class="font-medium text-primary text-sm underline inline-block" id="documentation-label">
-            {$t('documentation')}
-          </p>
-        </a>
-      </div>
+    <div class="flex flex-col gap-2 mt-5">
+      {@render link(
+        `https://docs.${info.version}.archive.immich.app/overview/introduction`,
+        mdiInformationOutline,
+        $t('documentation'),
+      )}
 
-      <div>
-        <a href="https://github.com/immich-app/immich/" target="_blank" rel="noreferrer">
-          <Icon icon={mdiGithub} size="1.5em" class="inline-block" />
-          <p class="font-medium text-primary text-sm underline inline-block" id="github-label">
-            {$t('source')}
-          </p>
-        </a>
-      </div>
+      {@render link('https://github.com/immich-app/immich/', mdiGithub, $t('source'))}
 
-      <div>
-        <a href="https://discord.immich.app" target="_blank" rel="noreferrer">
-          <Icon icon={siDiscord} class="inline-block" size="1.5em" />
-          <p class="font-medium text-primary text-sm underline inline-block" id="github-label">
-            {$t('discord')}
-          </p>
-        </a>
-      </div>
+      {@render link('https://discord.immich.app', siDiscord, $t('discord'))}
 
-      <div>
-        <a href="https://github.com/immich-app/immich/issues/new/choose" target="_blank" rel="noreferrer">
-          <Icon icon={mdiBugOutline} size="1.5em" class="inline-block" />
-          <p class="font-medium text-primary text-sm underline inline-block" id="github-label">
-            {$t('bugs_and_feature_requests')}
-          </p>
-        </a>
-      </div>
+      {@render link(
+        'https://github.com/immich-app/immich/issues/new/choose',
+        mdiBugOutline,
+        $t('bugs_and_feature_requests'),
+      )}
     </div>
     {#if info.thirdPartyBugFeatureUrl || info.thirdPartySourceUrl || info.thirdPartyDocumentationUrl || info.thirdPartySupportUrl}
       <p class="mt-5">{$t('third_party_resources')}</p>
       <p class="text-sm mt-1">
         {$t('support_third_party_description')}
       </p>
-      <div class="flex flex-col sm:grid sm:grid-cols-2 gap-2 mt-5">
+      <div class="flex flex-col gap-2 mt-5">
         {#if info.thirdPartyDocumentationUrl}
-          <div>
-            <a href={info.thirdPartyDocumentationUrl} target="_blank" rel="noreferrer">
-              <Icon icon={mdiInformationOutline} size="1.5em" class="inline-block" />
-              <p class="font-medium text-primary text-sm underline inline-block" id="documentation-label">
-                {$t('documentation')}
-              </p>
-            </a>
-          </div>
+          {@render link(info.thirdPartyDocumentationUrl, mdiInformationOutline, $t('documentation'))}
         {/if}
 
         {#if info.thirdPartySourceUrl}
-          <div>
-            <a href={info.thirdPartySourceUrl} target="_blank" rel="noreferrer">
-              <Icon icon={mdiGit} size="1.5em" class="inline-block" />
-              <p class="font-medium text-primary text-sm underline inline-block" id="github-label">
-                {$t('source')}
-              </p>
-            </a>
-          </div>
+          {@render link(info.thirdPartySourceUrl, mdiGit, $t('source'))}
         {/if}
 
         {#if info.thirdPartySupportUrl}
-          <div>
-            <a href={info.thirdPartySupportUrl} target="_blank" rel="noreferrer">
-              <Icon icon={mdiFaceAgent} class="inline-block" size="1.5em" />
-              <p class="font-medium text-primary text-sm underline inline-block" id="github-label">
-                {$t('support')}
-              </p>
-            </a>
-          </div>
+          {@render link(info.thirdPartySupportUrl, mdiFaceAgent, $t('support'))}
         {/if}
 
         {#if info.thirdPartyBugFeatureUrl}
-          <div>
-            <a href={info.thirdPartyBugFeatureUrl} target="_blank" rel="noreferrer">
-              <Icon icon={mdiBugOutline} size="1.5em" class="inline-block" />
-              <p class="font-medium text-primary text-sm underline inline-block" id="github-label">
-                {$t('bugs_and_feature_requests')}
-              </p>
-            </a>
-          </div>
+          {@render link(info.thirdPartyBugFeatureUrl, mdiBugOutline, $t('bugs_and_feature_requests'))}
         {/if}
       </div>
     {/if}