fix: corrected scroll of main component at client mods; feat: improoved ux (#341)

Author: mgDentist

src/react/Screen.tsx

@@ -13,7 +13,7 @@ export default ({ title, children, backdrop = true, style, className = '', title
   return (
     <>
       {backdrop === 'dirt' ? <div className='dirt-bg' /> : backdrop ? <div className="backdrop" /> : null}
-      <div className={`fullscreen ${className}`} style={{ overflow: 'auto', ...style }}>
+      <div className={`fullscreen ${className}`} style={{ ...style }}>
         <div className="screen-content" style={{ ...contentStyle, ...(titleMarginTop === undefined ? {} : { marginTop: titleMarginTop }) }}>
           <div className={`screen-title ${titleSelectable ? 'text-select' : ''}`}>{title}</div>
           {children}

src/react/mods.module.css

@@ -1,4 +1,5 @@
 .root {
+  min-height: 0; 
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -31,29 +32,33 @@
 }
 
 .content {
-  display: flex;
+  display: grid;
+  grid-template-columns: 60% 40%;
   flex: 1;
   gap: 10px;
   overflow: hidden;
   min-height: 0; /* Important for Firefox */
 }
 
 .verticalContent {
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: none;
+  grid-template-rows: 60% 40%;
+  overflow: hidden;
 }
 
 .verticalContent .modList {
-  height: 50%;
-  min-height: 200px;
+  max-height: 100%;
+  overflow-y: auto;
 }
 
 .verticalContent .sidebar {
-  height: 50%;
+  max-height: 100%;
   width: 100%;
+  overflow-y: auto;
 }
 
 .modList {
-  flex: 1;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
@@ -63,18 +68,19 @@
   padding: 5px;
   min-height: 0; /* Important for Firefox */
   height: 100%;
+  width: 100%;
 }
 
 .sidebar {
-  width: 200px;
+  overflow-y: auto;
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
   gap: 10px;
   padding: 10px;
   background: rgba(0, 0, 0, 0.3);
   border-radius: 4px;
-  flex-shrink: 0;
-  height: 100%;
 }
 
 .modInfo {

src/screens.css

@@ -33,8 +33,9 @@
     flex-direction: column;
     margin-top: 35px;
     /* todo remove it but without it in chrome android the screen is not scrollable */
-    overflow: auto;
-    height: fit-content;
+    /*! upd: changed from "overflow: auto" to "overflow: hidden" to fix main component scroll - delete this comment after testing */
+    overflow: hidden;
+    /* height: fit-content; */ /*! delete this line after testing previous line */
     /* todo I'm not sure about it */
     /* margin-top: calc(100% / 6 - 16px); */
     align-items: center;