fix: header subtitle overflow

Signed-off-by: Innei <tukon479@gmail.com>
mx-space · Dec 24, 2022 · ac95920 · ac95920
1 parent 77301f0
commit ac95920
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/src/components/layouts/BasicLayout/Header/Header.tsx b/src/components/layouts/BasicLayout/Header/Header.tsx
@@ -106,12 +106,15 @@ export const Header: FC = observer(() => {
         )}
       >
         <div
-          className={classNames(styles['head-swiper'], 'justify-between')}
+          className={classNames(
+            styles['head-swiper'],
+            'justify-between min-w-0',
+          )}
           ref={appHeaderRef}
         >
           <div
             className={
-              'flex items-center justify-center cursor-pointer select-none'
+              'flex items-center justify-center cursor-pointer select-none min-w-0'
             }
             onClick={clickFunc}
           >

diff --git a/src/components/layouts/BasicLayout/Header/index.module.css b/src/components/layouts/BasicLayout/Header/index.module.css
@@ -39,21 +39,21 @@
 }
 
 .header-title-wrapper {
-  @apply flex flex-col ml-4 py-2 box-border justify-center;
+  @apply flex flex-col ml-4 py-2 box-border justify-center min-w-0;
 
   height: 4rem;
 }
 
 .title {
-  @apply relative inline-block text-xl font-medium mt-0 truncate flex-shrink-0;
+  @apply relative inline-block text-xl font-medium mt-0 truncate flex-shrink-0 min-w-0;
 
   &.title-has-sub {
     @apply text-lg;
   }
 }
 
 .subtitle {
-  @apply text-sm text-gray-2;
+  @apply text-sm text-gray-2 flex-1 min-w-0 truncate;
 
   margin-top: -0.3rem;
 }