feat: responsive panel account

PrestaShopCorp · Sep 22, 2023 · 7f336bb · 7f336bb
1 parent c6e04e5
commit 7f336bb
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 9 deletions.
diff --git a/src/components/panel/AccountPanel.vue b/src/components/panel/AccountPanel.vue
@@ -13,17 +13,14 @@
         {{ t('psaccounts.account.title', shopsInContext.length) }}
       </p>
     </div>
-    <div
-      class="acc-flex acc-flex-col acc-items-center md:acc-flex-row"
-    >
+    <div class="acc-gap-4 acc-flex acc-flex-wrap md:acc-justify-normal acc-justify-center md:acc-flex-row acc-flex-col">
       <AccountShopLinkMessage
-        class="md:acc-mr-2"
+        class="acc-flex-1 acc-min-w-[247px]"
         :shops-in-context="shopsInContext"
         :shop-context="shopContext"
       />
       <AccountLinkToUi
         v-if="!shopsWithoutUrl.length"
-        class="acc-mt-2 md:acc-mt-0"
         :accounts-ui-url="accountsUiUrl"
         :app="app"
         :is-super-admin="isSuperAdmin"

diff --git a/src/components/panel/accountSubComponents/AccountLinkToUi.vue b/src/components/panel/accountSubComponents/AccountLinkToUi.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="acc-flex acc-space-x-4"
+    class="acc-gap-2 acc-items-center acc-flex"
   >
     <puik-button
       v-if="shops.length"

diff --git a/src/components/panel/accountSubComponents/AccountShopLinkMessage.vue b/src/components/panel/accountSubComponents/AccountShopLinkMessage.vue
@@ -1,13 +1,13 @@
 <template>
   <div
-    class="acc-flex acc-flex-col acc-flex-grow acc-items-center md:acc-flex-row"
+    class="acc-flex"
   >
     <img
       :src="PsLogo"
-      class="acc-w-11 acc-h-11 md:acc-mr-3"
+      class="acc-w-11 acc-h-11 acc-mr-4"
     >
     <div
-      class="acc-mt-2 puik-body-default acc-text-center acc-align-middle md:acc-mt-0 md:acc-text-left"
+      class="acc-mt-2 puik-body-default"
       data-testid="account-shop-link-message"
     >
       <template v-if="linkedShops.length">