web/satellite: improve onboarding CLI flow small screen adaptation

Improved onboarding CLI flow view on smaller screens.
Also improved notification boxes adaptation.

Issue:
https://github.com/storj/storj/issues/5894

Change-Id: I83dd8968df937d0d50535707e02914bd232fed21

web/satellite/src/components/notifications/NotificationArea.vue

@@ -50,5 +50,10 @@ const doNotificationsExist = computed((): boolean => {
         border-radius: 12px;
         z-index: 9999;
         overflow: hidden;
+
+        @media screen and (width <= 450px) {
+            width: unset;
+            left: 17px;
+        }
     }
 </style>

web/satellite/src/components/notifications/NotificationItem.vue

@@ -171,6 +171,10 @@ onMounted((): void => {
                 height: auto;
                 width: 270px;
                 word-break: break-word;
+
+                @media screen and (width <= 450px) {
+                    width: unset;
+                }
             }
 
             &__link {

web/satellite/src/components/onboardingTour/OnboardingTourArea.vue

@@ -17,12 +17,13 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-}
 
-@media screen and (width <= 760px) {
+    @media screen and (width <= 760px) {
-
-    .tour-area {
         width: 88% !important;
     }
+
+    @media screen and (width <= 600px) {
+        padding: 30px 0 !important;
+    }
 }
 </style>

web/satellite/src/components/onboardingTour/steps/CLIStep.vue

@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <div>
+    <div class="wrap">
         <ProgressBar />
         <router-view />
     </div>
@@ -11,3 +11,11 @@
 <script setup lang="ts">
 import ProgressBar from '@/components/onboardingTour/steps/cliFlow/ProgressBar.vue';
 </script>
+
+<style scoped lang="scss">
+.wrap {
+    @media screen and (width <= 600px) {
+        width: 100%;
+    }
+}
+</style>

web/satellite/src/components/onboardingTour/steps/cliFlow/AGPermissions.vue

@@ -256,6 +256,11 @@ onMounted(async (): Promise<void> => {
             width: 287px;
             padding: 0 98.5px;
 
+            @media screen and (width <= 600px) {
+                width: 100%;
+                padding: 0;
+            }
+
             &__label {
                 font-family: 'font_medium', sans-serif;
                 margin: 20px 0 8px;
@@ -272,6 +277,11 @@ onMounted(async (): Promise<void> => {
             padding: 0 98.5px;
             flex-wrap: wrap;
 
+            @media screen and (width <= 600px) {
+                width: 100%;
+                padding: 0;
+            }
+
             &__container {
                 display: flex;
                 margin-top: 5px;
@@ -283,5 +293,9 @@ onMounted(async (): Promise<void> => {
     :deep(.duration-selection) {
         width: 287px;
         margin-left: 0;
+
+        @media screen and (width <= 600px) {
+            width: 100%;
+        }
     }
 </style>

web/satellite/src/components/onboardingTour/steps/cliFlow/ProgressBar.vue

@@ -81,6 +81,10 @@ const fill = computed((): string => {
             background: var(--c-grey-3);
             border-radius: 8px;
 
+            @media screen and (width <= 600px) {
+                width: 100%;
+            }
+
             &__fill {
                 height: 16px;
                 background: var(--c-green-5);

web/satellite/src/components/onboardingTour/steps/cliFlow/SuccessScreen.vue

@@ -86,6 +86,10 @@ async function endOnboarding(): Promise<void> {
         align-items: center;
         flex-direction: column;
 
+        @media screen and (width <= 600px) {
+            padding: 24px;
+        }
+
         &__title {
             margin: 20px 0;
             font-family: 'font_Bold', sans-serif;
@@ -108,6 +112,12 @@ async function endOnboarding(): Promise<void> {
             width: 100%;
             margin-top: 24px;
             column-gap: 24px;
+
+            @media screen and (width <= 450px) {
+                flex-direction: column-reverse;
+                column-gap: unset;
+                row-gap: 24px;
+            }
         }
     }
 

web/satellite/src/components/onboardingTour/steps/cliFlow/permissions/DurationPicker.vue

@@ -146,6 +146,14 @@ function closePicker(): void {
         position: absolute;
         z-index: 1;
         top: 100%;
+
+        @media screen and (width <= 930px) {
+            width: 500px;
+        }
+
+        @media screen and (width <= 750px) {
+            width: 100%;
+        }
     }
 
     .duration-picker {
@@ -164,6 +172,11 @@ function closePicker(): void {
             column-gap: 48px;
             padding: 10px 24px 0;
 
+            @media screen and (width <= 380px) {
+                padding: 10px 10px 0;
+                column-gap: 24px;
+            }
+
             &__column {
                 list-style-type: none;
                 padding-left: 0;

web/satellite/src/components/onboardingTour/steps/common/CLIFlowContainer.vue

@@ -31,7 +31,7 @@ const props = withDefaults(defineProps<{
     onNextClick: () => unknown;
     onBackClick: () => unknown;
     title: string;
-    isLoading: boolean;
+    isLoading?: boolean;
 }>(), {
     onNextClick: () => {},
     onBackClick: () => {},
@@ -52,6 +52,10 @@ const props = withDefaults(defineProps<{
         flex-direction: column;
         align-items: center;
 
+        @media screen and (width <= 600px) {
+            padding: 24px;
+        }
+
         &__title {
             margin: 20px 0;
             font-family: 'font_Bold', sans-serif;
@@ -67,6 +71,12 @@ const props = withDefaults(defineProps<{
             width: 100%;
             margin-top: 34px;
             column-gap: 24px;
+
+            @media screen and (width <= 450px) {
+                flex-direction: column-reverse;
+                column-gap: unset;
+                row-gap: 24px;
+            }
         }
     }
 </style>

web/satellite/src/components/onboardingTour/steps/common/OSContainer.vue

@@ -131,6 +131,10 @@ onMounted((): void => {
                 padding: 16px;
                 color: #9daab6;
                 cursor: pointer;
+
+                @media screen and (width <= 350px) {
+                    padding: 10px;
+                }
             }
 
             &__choice:first-child {

web/satellite/src/components/onboardingTour/steps/common/TabWithCopy.vue

@@ -3,7 +3,7 @@
 
 <template>
     <div class="tab-copy">
-        <p class="tab-copy__value" :aria-roledescription="ariaRoleDescription">{{ value }}</p>
+        <p class="tab-copy__value" :title="value" :aria-roledescription="ariaRoleDescription">{{ value }}</p>
         <CopyIcon class="tab-copy__icon" @click="onCopyClick" />
     </div>
 </template>

web/satellite/src/components/onboardingTour/steps/common/ValueWithCopy.vue

@@ -3,7 +3,7 @@
 
 <template>
     <div class="value-copy">
-        <p class="value-copy__value" :aria-roledescription="roleDescription">{{ value }}</p>
+        <p class="value-copy__value" :title="value" :aria-roledescription="roleDescription">{{ value }}</p>
         <VButton
             class="value-copy__button"
             label="Copy"
@@ -51,6 +51,11 @@ function onCopyClick(): void {
         border-radius: 10px;
         max-width: calc(100% - 50px);
 
+        @media screen and (width <= 450px) {
+            padding: 12px;
+            max-width: calc(100% - 24px);
+        }
+
         &__value {
             font-size: 16px;
             line-height: 28px;
@@ -63,6 +68,10 @@ function onCopyClick(): void {
         &__button {
             margin-left: 32px;
             min-width: 66px;
+
+            @media screen and (width <= 450px) {
+                margin-left: 12px;
+            }
         }
     }
 </style>