edit panel sms show

src/core/layouts/BasicHeader.vue

@@ -5,8 +5,8 @@
     :style="`height:${layoutStore.header.height}`"
   >
     <!--    :style="`height:${layoutStore.header.height};line-height:${layoutStore.header.height}`"-->
-    <div class="flex w-full min-w-0 items-center overflow-hidden">
-      <div class="flex min-w-0 flex-1 items-center overflow-hidden">
+    <div class="flex w-full min-w-0 items-center gap-2 overflow-hidden">
+      <div class="header-menu-zone flex min-w-0 flex-1 items-center overflow-hidden">
         <img :src="getConfigApp('avatar')" style="height: 38px" class="mr-5 mt-1 shrink-0" />
         <BaseButton
           type="text"
@@ -17,10 +17,9 @@
         />
         <BasicMenu />
       </div>
-      <!--      <BaseButton icon="vuesax-linear:menu" @click="handleCollapseSideMenu"></BaseButton>-->
-      <!--      <div @click="handleCollapseSideMenu">بستن منو</div>-->
-      <div class="flex shrink-0 items-center gap-3">
-        <SmsCreditWidget variant="desktop" />
+      <div class="header-actions flex shrink-0 items-center gap-2">
+        <SmsCreditWidget variant="desktop" class="header-actions__credit min-w-0" />
+        <div class="header-actions__fixed flex shrink-0 items-center gap-3">
         <ADropdown placement="bottomLeft" class="ml-5">
           <a class="ant-dropdown-link" @click.prevent>
             <!--            Hover me-->
@@ -63,6 +62,7 @@
           v-if="layoutStore.showSettingsIcon"
           @click="handleShowSettings"
         />
+        </div>
       </div>
     </div>
 
@@ -172,7 +172,6 @@ const userStore = useUserStore()
 const settingsStore = useSettingsStore()
 const { menuTheme } = useAdminTheme()
 
-
 const { width } = useWindowSize()
 //my info modal
 const loading = ref<boolean>(false)
@@ -252,6 +251,26 @@ function clearLocalStorage() {
     align-items: center;
   }
 
+  .header-menu-zone {
+    position: relative;
+    z-index: 2;
+    min-width: 0;
+    flex: 1 1 0%;
+    overflow: hidden;
+  }
+
+  .header-actions {
+    position: relative;
+    z-index: 3;
+    flex-shrink: 0;
+    background: var(--admin-bg-surface);
+    padding-inline-start: 4px;
+  }
+
+  .header-actions__credit {
+    max-width: min(220px, 38vw);
+  }
+
   .header-avatar {
     border: 2px solid var(--admin-border-strong);
   }