fix(renderer-app): room detailed page overflow (#1398)

netless-io · Mar 1, 2022 · e11d1a1 · e11d1a1
1 parent 6c0af07
commit e11d1a1
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 22 deletions.
diff --git a/desktop/renderer-app/src/components/EditRoomPage/style.less b/desktop/renderer-app/src/components/EditRoomPage/style.less
@@ -1,18 +1,16 @@
+@import "flat-components/theme/fancy-scrollbar.less";
+
 .edit-room-page {
+    display: flex;
+    flex-direction: column;
     height: 100%;
-    overflow: auto;
     border-radius: 6px;
     box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
     background-color: #fff;
 }
 
 .edit-room-page-header-container {
-    position: fixed;
-    width: 86%;
-    z-index: 1;
-    margin: 0 24px;
-    padding: 16px 0;
-    background-color: #fff;
+    padding: 16px 24px;
 }
 
 .edit-room-page-header-title {
@@ -22,9 +20,9 @@
 }
 
 .edit-room-page-body {
-    width: 560px;
-    margin: 0 auto;
-    margin-top: 20px;
+    .fancy-scrollbar-mixin();
+    flex: 1;
+    padding: 0 148px;
 }
 
 .flat-color-scheme-dark {

diff --git a/desktop/renderer-app/src/pages/PeriodicRoomDetailPage/index.less b/desktop/renderer-app/src/pages/PeriodicRoomDetailPage/index.less
@@ -1,18 +1,16 @@
+@import "flat-components/theme/fancy-scrollbar.less";
+
 .periodic-room-detail-page-container {
+    display: flex;
+    flex-direction: column;
     height: 100%;
-    overflow: auto;
     box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
     border-radius: 6px;
     background-color: #fff;
 }
 
 .periodic-room-detail-page-header-container {
-    position: fixed;
-    width: 86%;
-    z-index: 1;
-    margin: 0 24px;
-    padding: 16px 0;
-    background-color: #fff;
+    padding: 16px 24px;
 }
 
 .periodic-room-detail-page-header-title {
@@ -24,9 +22,9 @@
 }
 
 .periodic-room-detail-page-panel-container {
-    width: 560px;
-    margin: 0 auto;
-    margin-top: 65px;
+    .fancy-scrollbar-mixin();
+    flex: 1;
+    padding: 0 148px;
 }
 
 .flat-color-scheme-dark {

diff --git a/desktop/renderer-app/src/pages/PeriodicRoomDetailPage/index.tsx b/desktop/renderer-app/src/pages/PeriodicRoomDetailPage/index.tsx
@@ -141,7 +141,7 @@ export const PeriodicRoomDetailPage = observer<{}>(function PeriodicRoomDetailPa
                         onBackPreviousPage={backPreviousPage}
                     />
                 </div>
-                <div className="periodic-room-detail-page-panel-container fancy-scrollbar">
+                <div className="periodic-room-detail-page-panel-container">
                     <PeriodicRoomPanel
                         inviteBaseUrl={FLAT_WEB_BASE_URL}
                         isCreator={isCreator}

diff --git a/packages/flat-components/src/components/PeriodicRoomPage/index.tsx b/packages/flat-components/src/components/PeriodicRoomPage/index.tsx
@@ -156,7 +156,7 @@ export const PeriodicRoomPanel: React.FC<PeriodicRoomPanelProps> = ({
     };
 
     return (
-        <div className="periodic-room-panel-container fancy-scrollbar">
+        <div className="periodic-room-panel-container">
             <div className="periodic-room-panel-body">
                 <div className="periodic-room-panel-tips">
                     <div className="periodic-room-panel-tips-title">