IMPR: Minor updates

src/scss/_components/_ui.main.scss

@@ -178,15 +178,25 @@ textarea,
     .container {
         position: relative;
         display: flex;
-        flex-direction: row;
+        flex-direction: column;
         align-items: center;
         justify-content: center;
+        @media (min-width: map-get($grid-breakpoints, 'sm')) {
+            flex-direction: row;
+        }
     }
     .typography {
         flex: 1 1;
     }
     .btn-close {
-        margin-left: 1rem;
+        position: absolute;
+        top: 0;
+        right: 0;
+
+        @media (min-width: map-get($grid-breakpoints, 'sm')) {
+            position: static;
+            margin-left: 1rem;
+        }
     }
 }
 

src/scss/_layout.scss

@@ -10,8 +10,8 @@
 
 .bootstrap-select .dropdown-toggle .filter-option .option {
     background: #dedede;
-    padding: .2rem .5rem;
-    margin: .2rem;
+    padding: 0.2rem 0.5rem;
+    margin: 0.2rem;
     color: #212529;
 }
 
@@ -21,21 +21,22 @@ body {
 }
 
 // shrink elements on scroll
-body.shrink {}
+body.shrink {
+}
 
 // sticky footer
-@media (min-width: map-get($grid-breakpoints, "sm")) {
-    html, body {
+@media (min-width: map-get($grid-breakpoints, 'sm')) {
+    body {
         height: 100%;
         min-height: 100%;
     }
 
     .wrapper {
         min-height: 100%;
-        padding-bottom: $footer-size + $footer-bar-size + $grid-gutter-height / 2;
+        padding-bottom: $footer-size + $footer-bar-size + $grid-gutter-height /
+            2;
 
         //padding-top: $grid-gutter-height;
-
     }
 
     .footer {
@@ -126,15 +127,15 @@ body.shrink {}
         }
 
         .copyright {
-            padding-right: .5rem;
+            padding-right: 0.5rem;
         }
 
         li {
-            padding: 0 .5rem;
+            padding: 0 0.5rem;
         }
     }
 
-    @media (min-width: map-get($grid-breakpoints, "sm")) {
+    @media (min-width: map-get($grid-breakpoints, 'sm')) {
         .wrapper {
             padding-bottom: $footer-bar-size;
         }