improvement: fix flex layout

zhanglun · Dec 29, 2023 · 1d26931 · 1d26931
1 parent 0b67de0
commit 1d26931
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 12 deletions.
diff --git a/src/layout/Article/Layout1.tsx b/src/layout/Article/Layout1.tsx
@@ -64,8 +64,8 @@ export const Layout1 = React.memo(
     };
 
     return (
-      <div className="grid border-r">
-        <div className="h-[var(--app-toolbar-height)] grid grid-cols-[1fr_1fr] items-center justify-between border-b">
+      <div className="grow-0 basis-[var(--app-article-width)] border-r">
+        <div className="h-[var(--app-toolbar-height)] grid grid-cols-[auto_1fr] items-center justify-between border-b">
           <div
             className="
             flex

diff --git a/src/layout/Article/View.tsx b/src/layout/Article/View.tsx
@@ -28,10 +28,10 @@ export function View() {
   const scrollBoxRef = useRef<ScrollBoxRefObject>(null);
 
   return (
-    <div>
+    <div className="flex-1">
       <div
         className={
-          "h-[var(--app-toolbar-height)] flex items-center justify-end px-2 space-x-0.5 border-b"
+          "h-[var(--app-toolbar-height)] flex items-center justify-end px-2 space-x-0.5 border-b relative z-10 bg-background"
         }
       >
         <ToolbarItemNavigator />
@@ -42,12 +42,12 @@ export function View() {
       </div>
       <AnimatePresence mode="wait">
         <motion.div
-          // key={store.article?.uuid || "view"}
-          // initial={{ y: 20, opacity: 0 }}
-          // animate={{ y: 0, opacity: 1 }}
-          // exit={{ y: -20, opacity: 0 }}
-          // transition={{ duration: 0.2 }}
-          // className="overflow-hidden py-5"
+          key={store.article?.uuid || "view"}
+          initial={{ y: 20, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          exit={{ y: -20, opacity: 0 }}
+          transition={{ duration: 0.2 }}
+          className="overflow-hidden"
         >
           <ScrollBox
             className="h-[calc(100vh_-_var(--app-toolbar-height))]"

diff --git a/src/layout/Article/index.module.scss b/src/layout/Article/index.module.scss
@@ -3,8 +3,7 @@
 .article {
   flex: 1;
   height: 100vh;
-  display: grid;
-  grid-template-columns: var(--app-article-width) 1fr;
+  display: flex;
   background-color: var(--app-main-bg-color);
   position: relative;
 }