Fix UI - Small Screen #8

Author: peterjuma

index.html

@@ -22,7 +22,6 @@
             <button class="btn" onclick="gridView()"><i class="fa fa-th-large"></i></button>  
             <button class="btn" id="addBtn"><i class="fas fa-plus"></i></button>
         </div>
-        <br>
         <div class="row" id="notes">
         </div>
     </div>

public/styles/style.css

@@ -129,7 +129,7 @@ body {
     display: block;
     font-size: 18px;
     width: 100%;
-    height: 100%;
+    height: 100%; 
     margin-top: 10px;
 }
 
@@ -144,7 +144,8 @@ body {
   display: block;
   font-size: 18px;
   width: 100%;
-  height: fit-content;
+  margin-bottom: 5px;
+  height: calc(100% - 50px);
 }
 
 input[type="text"] {
@@ -160,30 +161,29 @@ input[type="text"] {
 
 textarea {
   width: 100%;
-  height: 75vh; 
-  display: block; 
+  height: inherit;
   background-color: rgb(249, 239, 226);
   margin-top: 5px;
   padding: 10px; 
   font-size: 18px;
-  resize: none;
   border-radius: 5px;
   box-shadow: none;
   outline: none;
   border: 1px solid #D8D8D8;
+  resize: none;
 }
 
 .markdown-body {
-  box-sizing: border-box;
   margin: 0 auto;
   margin-bottom: 10px;
   padding: 10px;
   font-size: 20px;
 }
 
-#btnContainer {
+#btnContainer, .editBtns {
   justify-content: space-around;
   display: flex;
+  margin-bottom: 10px;
 }
 
 /* Responsive columns - one column layout (vertical) on small screens */
@@ -196,9 +196,13 @@ textarea {
   }
 
   textarea {
-    height: 78vmax; 
     font-size: 12px;
-    resize: vertical;
+    resize: none;
+  }
+
+  .editnote {
+    margin-bottom: 3px;
+    height: calc(100% - 40px);
   }
 
   input[type="text"] {