From f642cdd274514b4c093a11cb1fdaefd4bbc7c33f Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Tue, 11 Feb 2025 16:15:25 +0800
Subject: [PATCH] refactor: improve preview media action buttons layout and
 styling

- Restructure preview media action buttons container
- Remove unnecessary pointer-events-none class from inner div
- Wrap action buttons in an additional container for better overflow handling
- Maintain existing functionality for download and open in browser actions

Signed-off-by: Innei <tukon479@gmail.com>
---
 .../src/components/ui/media/preview-media.tsx | 58 ++++++++++---------
 1 file changed, 30 insertions(+), 28 deletions(-)

diff --git a/apps/renderer/src/components/ui/media/preview-media.tsx b/apps/renderer/src/components/ui/media/preview-media.tsx
index e4263127d..7230e1bff 100644
--- a/apps/renderer/src/components/ui/media/preview-media.tsx
+++ b/apps/renderer/src/components/ui/media/preview-media.tsx
@@ -110,39 +110,41 @@ const Wrapper: Component<{
         >
           {children}
           <RootPortal to={sideContent ? null : undefined}>
-            <m.div
-              animate={animateController}
-              className={cn(
-                "pointer-events-none absolute inset-x-0 bottom-0 z-[99] flex justify-end gap-3 p-2 text-white/70 [&_button]:hover:text-white",
-                "overflow-hidden",
-                sideContent ? "rounded-bl-xl" : "rounded-xl",
-                "bg-black/30",
-              )}
-              onClick={stopPropagation}
-            >
-              {showActions && (
-                <Fragment>
-                  {IN_ELECTRON && (
+            <div className="pointer-events-none absolute inset-x-0 bottom-0 z-[99] overflow-hidden">
+              <m.div
+                animate={animateController}
+                className={cn(
+                  "flex justify-end gap-3 p-2 text-white/70 [&_button]:hover:text-white",
+
+                  sideContent ? "rounded-bl-xl" : "rounded-xl",
+                  "bg-black/30",
+                )}
+                onClick={stopPropagation}
+              >
+                {showActions && (
+                  <Fragment>
+                    {IN_ELECTRON && (
+                      <ActionButton
+                        tooltip={t("common:words.download")}
+                        onClick={() => {
+                          tipcClient?.download(src)
+                        }}
+                      >
+                        <i className="i-mgc-download-2-cute-re" />
+                      </ActionButton>
+                    )}
                     <ActionButton
-                      tooltip={t("common:words.download")}
+                      tooltip={t(COPY_MAP.OpenInBrowser())}
                       onClick={() => {
-                        tipcClient?.download(src)
+                        window.open(src)
                       }}
                     >
-                      <i className="i-mgc-download-2-cute-re" />
+                      <i className="i-mgc-external-link-cute-re" />
                     </ActionButton>
-                  )}
-                  <ActionButton
-                    tooltip={t(COPY_MAP.OpenInBrowser())}
-                    onClick={() => {
-                      window.open(src)
-                    }}
-                  >
-                    <i className="i-mgc-external-link-cute-re" />
-                  </ActionButton>
-                </Fragment>
-              )}
-            </m.div>
+                  </Fragment>
+                )}
+              </m.div>
+            </div>
           </RootPortal>
         </div>
         {!!sideContent && (