web/satellite: access page responsiveness added

navigation logo shrink fixed by updating icon;
https://github.com/storj/storj/issues/5461
https://github.com/storj/storj/issues/5458

Change-Id: I6794cbf1c63786978336810f4c8151dc7825c7c8

web/satellite/src/components/accessGrants/AccessGrants.vue

@@ -387,13 +387,16 @@ export default class AccessGrants extends Vue {
         flex-direction: column;
         align-items: flex-start;
         justify-content: center;
-        padding: 10px 28px;
+        padding: 25px 28px;
         width: 300px;
-        height: 220px;
         background: #fff;
         box-shadow: 0 0 20px rgb(0 0 0 / 4%);
         border-radius: 10px;
         min-width: 175px;
+
+        @media screen and (max-width: 930px) {
+            width: 100%;
+        }
     }
 
     .access-grants {
@@ -440,11 +443,14 @@ export default class AccessGrants extends Vue {
             &__cli-credentials {
                 @include grant-flow-card;
 
-                @media screen and (max-width: 448px) {
-                    height: auto;
+                @media screen and (max-width: 370px) {
+
+                    .access-grants__flows-area__button-container {
+                        flex-direction: column;
+                        align-items: flex-start;
+                    }
 
                     .access-grants__flows-area__create-button {
-                        padding: 20px 10px;
                         margin: 8px 0 0;
                     }
                 }
@@ -493,6 +499,11 @@ export default class AccessGrants extends Vue {
         }
 
         .access-grants-items {
+            padding-bottom: 55px;
+
+            @media screen and (max-width: 1150px) {
+                margin-top: -45px;
+            }
 
             &__content {
                 margin-top: 20px;

web/satellite/src/components/common/VSearchAlternateStyling.vue

@@ -63,6 +63,10 @@ async function processSearchQuery(): Promise<void> {
         background-repeat: no-repeat;
         background-size: 22px 22px;
         background-position: top 16px left 16px;
+
+        @media screen and (max-width: 1150px) {
+            width: 100%;
+        }
     }
 
     ::placeholder {

web/satellite/src/components/navigation/MobileNavigation.vue

@@ -561,14 +561,14 @@ export default class MobileNavigation extends Vue {
             height: 4rem;
 
             &__logo {
-                width: 187px;
-                max-width: 187px;
-                height: 32px;
-                max-height: 32px;
+                width: 211px;
+                max-width: 211px;
+                height: 37px;
+                max-height: 37px;
 
                 svg {
-                    width: 187px;
-                    height: 32px;
+                    width: 211px;
+                    height: 37px;
                 }
             }
         }