Set height on nested elements to avoid mutliple scrollbars

Felix Breidenstein · Felix Breidenstein · commit 79d7df1f7ee1 · 2021-07-20T11:26:14.000+02:00
diff --git a/popup.html b/popup.html
@@ -10,6 +10,7 @@
   font-family: "Segoe UI", Arial, Meiryo, sans-serif;
   max-width: 600px;
   max-height: 600px;
+  min-height: 480px;
 }
 .optionMenu {
   list-style: none;
@@ -45,6 +46,8 @@
 #main {
   font-size: 15px;
   padding-bottom: 5px;
+  height: 100%;
+  flex-direction: column;
 }
 #roleList {
   padding: 0;
@@ -97,7 +100,7 @@
 </style>
 </head>
 <body>
-<div style="display: flex">
+<div style="display: flex; height: 100%">
   <div class="mainPane" style="min-width: 280px">
     <div id="main" style="display: none">
       <div style="padding: 12px 6px 6px;">
diff --git a/src/popup.js b/src/popup.js
@@ -85,7 +85,7 @@ function main() {
         executeAction(tab.id, 'loadInfo', {}).then(userInfo => {
           if (userInfo) {
             loadFormList(url, userInfo, tab.id);
-            document.getElementById('main').style.display = 'block';
+            document.getElementById('main').style.display = 'flex';
           } else {
             const noMain = document.getElementById('noMain');
             const p = noMain.querySelector('p');
