fix(UI for firefox)

Author: Ajit Kumar

client/components/plugins/index.js

@@ -1,10 +1,9 @@
-import AdSense from 'components/adsense';
 import './style.scss';
+import AdSense from 'components/adsense';
 import alert from 'components/dialogs/alert';
 import confirm from 'components/dialogs/confirm';
 import prompt from 'components/dialogs/prompt';
 import select from 'components/dialogs/select';
-import DotsLoading from 'components/dots';
 import Router from 'lib/Router';
 import { calcRating, capitalize, getLoggedInUser, hideLoading, showLoading } from 'lib/helpers';
 
@@ -29,10 +28,12 @@ export default function Plugins({ user, orderBy, status, name }) {
       const res = await fetch(url);
       const { isAdmin, id: userId } = (await getLoggedInUser()) || {};
       const plugins = await res.json();
+      const adsPosition = [2, 15, 28];
 
       el.setAttribute('data-msg', 'No plugins found. :(');
-      for (const plugin of plugins) {
-        if (Math.random() < 0.1) {
+      for (let i = 0; i < plugins.length; i++) {
+        const plugin = plugins[i];
+        if (adsPosition.includes(i) || (i > 33 && Math.random() < 0.1)) {
           el.append(<AdSense className='plugin' style={{ position: 'relative' }} />);
         }
         el.append(<Plugin {...plugin} isAdmin={isAdmin} userId={userId} />);
@@ -86,7 +87,7 @@ function Plugin({
           )}
         </div>
         <p>
-          {id} •{' '}
+          {id}&nbsp;•&nbsp;
           <small>
             <strong>{version}</strong>
           </small>

client/main.scss

@@ -219,6 +219,7 @@ header {
 
 main {
   width: 100%;
+  min-height: 100%;
 
   &:empty {
     position: relative;

client/pages/home/style.scss

@@ -6,7 +6,7 @@
   justify-content: center;
   flex-direction: column;
   text-align: center;
-  min-height: 100%;
+  min-height: calc(100vh - 50px);
   scrollbar-width: none; // hide scrollbar in Firefox
 
   // hide scrollbar

client/pages/loginUser/style.scss

@@ -4,14 +4,19 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  min-height: 100%;
+  min-height: calc(100vh - 50px);
   width: 100%;
   max-width: unset;
   background-color: transparent;
   z-index: 1;
 
   form {
     width: 90%;
+    max-width: 400px;
+
+    h1 {
+      margin-top: 0;
+    }
   }
 
   &::before {

client/pages/plugin/style.scss

@@ -53,6 +53,10 @@
     overflow: auto;
     scrollbar-width: none;
 
+    h2 {
+      margin: 0;
+    }
+
     >* {
       cursor: pointer;
       padding: 10px;