From e7c10d43f5fe6c7903e9ef9def97fd4070c30235 Mon Sep 17 00:00:00 2001
From: redphx <96280+redphx@users.noreply.github.com>
Date: Thu, 26 Sep 2024 19:46:30 +0700
Subject: [PATCH] Fix buttons layout in product details page

---
 src/assets/css/button.styl        | 12 ------------
 src/assets/css/misc.styl          | 21 +++++++++++++++++++++
 src/assets/css/styles.styl        |  1 +
 src/modules/ui/product-details.ts | 21 +++++++--------------
 4 files changed, 29 insertions(+), 26 deletions(-)
 create mode 100644 src/assets/css/misc.styl

diff --git a/src/assets/css/button.styl b/src/assets/css/button.styl
index 5b68161..9c913d7 100644
--- a/src/assets/css/button.styl
+++ b/src/assets/css/button.styl
@@ -179,15 +179,3 @@ button.bx-inactive {
     opacity: 0.2;
     background: transparent !important;
 }
-
-.bx-button-shortcut {
-    max-width: max-content;
-    margin: 10px 0 0 0;
-    flex: 1 0 auto;
-}
-
-@media (min-width: 568px) and (max-height: 480px) {
-    .bx-button-shortcut {
-        margin: 8px 0 0 10px;
-    }
-}
diff --git a/src/assets/css/misc.styl b/src/assets/css/misc.styl
new file mode 100644
index 0000000..70babd7
--- /dev/null
+++ b/src/assets/css/misc.styl
@@ -0,0 +1,21 @@
+.bx-product-details-buttons {
+    display: flex;
+    gap: 10px;
+    flex-direction: row;
+
+    button {
+        max-width: max-content;
+        margin: 10px 0 0 0;
+        display: flex;
+    }
+}
+
+@media (min-width: 568px) and (max-height: 480px) {
+    .bx-product-details-buttons {
+        flex-direction: column;
+
+        button {
+            margin: 8px 0 0 10px;
+        }
+    }
+}
diff --git a/src/assets/css/styles.styl b/src/assets/css/styles.styl
index ab2aa8b..d3b9929 100644
--- a/src/assets/css/styles.styl
+++ b/src/assets/css/styles.styl
@@ -16,3 +16,4 @@
 @import 'game-bar.styl';
 @import 'stream-stats.styl';
 @import 'mkb.styl';
+@import 'misc.styl';
diff --git a/src/modules/ui/product-details.ts b/src/modules/ui/product-details.ts
index bdf70c8..bcff0a5 100644
--- a/src/modules/ui/product-details.ts
+++ b/src/modules/ui/product-details.ts
@@ -1,12 +1,11 @@
 import { BX_FLAGS } from "@/utils/bx-flags";
 import { BxIcon } from "@/utils/bx-icon";
 import { AppInterface } from "@/utils/global";
-import { ButtonStyle, createButton } from "@/utils/html";
+import { ButtonStyle, CE, createButton } from "@/utils/html";
 import { t } from "@/utils/translation";
 
 export class ProductDetailsPage {
     private static $btnShortcut = AppInterface && createButton({
-        classes: ['bx-button-shortcut'],
         icon: BxIcon.CREATE_SHORTCUT,
         label: t('create-shortcut'),
         style: ButtonStyle.FOCUSABLE,
@@ -17,7 +16,6 @@ export class ProductDetailsPage {
     });
 
     private static $btnWallpaper = AppInterface && createButton({
-        classes: ['bx-button-shortcut'],
         icon: BxIcon.DOWNLOAD,
         label: t('wallpaper'),
         style: ButtonStyle.FOCUSABLE,
@@ -48,17 +46,12 @@ export class ProductDetailsPage {
             // Find action buttons container
             const $container = document.querySelector('div[class*=ActionButtons-module__container]');
             if ($container && $container.parentElement) {
-                const fragment = document.createDocumentFragment();
-
-                // Shortcut button
-                if (BX_FLAGS.DeviceInfo.deviceType === 'android') {
-                    fragment.appendChild(ProductDetailsPage.$btnShortcut);
-                }
-
-                // Wallpaper button
-                fragment.appendChild(ProductDetailsPage.$btnWallpaper);
-
-                $container.parentElement.appendChild(fragment);
+                $container.parentElement.appendChild(CE('div', {
+                    class: 'bx-product-details-buttons',
+                },
+                    BX_FLAGS.DeviceInfo.deviceType === 'android' && ProductDetailsPage.$btnShortcut,
+                    ProductDetailsPage.$btnWallpaper,
+                ));
             }
         }, 500);
     }