Fix buttons layout in product details page

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;
-    }
-}

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;
+        }
+    }
+}

src/assets/css/styles.styl

@@ -16,3 +16,4 @@
 @import 'game-bar.styl';
 @import 'stream-stats.styl';
 @import 'mkb.styl';
+@import 'misc.styl';

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);
     }