mobile adaptation for contract-creation-form

src/forms/ContractCreationForm/components/ArbitrumStep.vue

@@ -181,6 +181,14 @@ const emitSettingsField = (
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: toRem(16) toRem(32);
+
+  @include respond-to(medium) {
+    grid-gap: toRem(16) toRem(20);
+  }
+
+  @include respond-to(tablet) {
+    grid-template-columns: unset;
+  }
 }
 
 .arbitrum-step__is-upgradeable-checkbox {
@@ -214,5 +222,13 @@ const emitSettingsField = (
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: toRem(16) toRem(32);
+
+  @include respond-to(medium) {
+    grid-gap: toRem(16) toRem(20);
+  }
+
+  @include respond-to(tablet) {
+    grid-template-columns: unset;
+  }
 }
 </style>

src/forms/ContractCreationForm/components/EthereumStep/components/GroupInfoCard.vue

@@ -24,7 +24,11 @@
       </div>
     </div>
     <ul class="group-info-card__indicators">
-      <li v-for="(indicator, idx) in indicators" :key="idx">
+      <li
+        v-for="(indicator, idx) in indicators"
+        :key="idx"
+        class="group-info-card__indicator"
+      >
         <h5 class="group-info-card__indicator-title">
           {{ indicator.title }}
         </h5>
@@ -199,6 +203,10 @@ const indicators = computed<Indicator[]>(() =>
   display: flex;
   align-items: center;
   gap: toRem(24);
+
+  @include respond-to(medium) {
+    gap: toRem(12);
+  }
 }
 
 .group-info-card__controller {
@@ -227,18 +235,29 @@ const indicators = computed<Indicator[]>(() =>
 .group-info-card__controller-icon {
   height: toRem(30);
   width: toRem(30);
+
+  @include respond-to(medium) {
+    height: toRem(24);
+    width: toRem(24s);
+  }
 }
 
 .group-info-card__indicators {
   margin: toRem(20) toRem(36) 0 0;
   display: grid;
-  grid-template-columns: repeat(2, max-content);
-  grid-gap: toRem(20);
+  grid-template-columns: repeat(2, auto);
+  grid-gap: toRem(20) toRem(32);
   justify-content: space-between;
 }
 
+.group-info-card__indicator {
+  display: grid;
+}
+
 .group-info-card__indicator-title {
   color: var(--text-secondary-main);
+
+  @include text-ellipsis;
 }
 
 .group-info-card__indicator-value {

src/forms/ContractCreationForm/components/EthereumStep/index.vue

@@ -25,7 +25,7 @@
       />
     </div>
     <div class="ethereum-step__divider" />
-    <div class="ethereum-step__groups">
+    <div ref="groupsElement" class="ethereum-step__groups">
       <h5 class="ethereum-step__group-title">
         {{ `Group #${form.ethereumConfig.groups.length}` }}
       </h5>
@@ -82,6 +82,7 @@ const props = defineProps<{
   isSubmitted: boolean
 }>()
 
+const groupsElement = ref<HTMLDivElement | null>(null)
 const groupsListWrpElement = ref<HTMLDivElement | null>(null)
 const editableGroupIdx = ref(-1)
 
@@ -98,6 +99,14 @@ watch(
   },
 )
 
+watch(editableGroupIdx, newIdx => {
+  if (!groupsElement.value || newIdx === -1) return
+  window.scrollTo({
+    top: groupsElement.value.offsetTop,
+    behavior: 'smooth',
+  })
+})
+
 const emitRootField = (field: keyof Form['ethereumConfig'], value: unknown) => {
   emit('update:form', {
     ...props.form,
@@ -159,6 +168,14 @@ const removeGroup = (idx: number) => {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: toRem(16) toRem(32);
+
+  @include respond-to(medium) {
+    grid-gap: toRem(16) toRem(20);
+  }
+
+  @include respond-to(tablet) {
+    grid-template-columns: unset;
+  }
 }
 
 .ethereum-step__is-upgradeable-checkbox {
@@ -192,6 +209,15 @@ const removeGroup = (idx: number) => {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: toRem(16) toRem(32);
+
+  @include respond-to(medium) {
+    grid-gap: toRem(16) toRem(20);
+  }
+
+  @include respond-to(tablet) {
+    grid-template-columns: unset;
+    grid-gap: toRem(24);
+  }
 }
 
 .ethereum-step__groups-list-wrp {
@@ -203,13 +229,21 @@ const removeGroup = (idx: number) => {
     height: 0;
     width: 0;
   }
+
+  @include respond-to(tablet) {
+    margin-top: unset;
+  }
 }
 
 .ethereum-step__groups-list {
   position: absolute;
   width: 100%;
   display: grid;
   grid-auto-rows: max-content;
-  gap: toRem(32);
+  gap: toRem(16);
+
+  @include respond-to(tablet) {
+    position: static;
+  }
 }
 </style>

src/forms/ContractCreationForm/components/GeneralStep.vue

@@ -45,10 +45,20 @@ const emitRootField = (field: keyof Form['generalConfig'], value: string) => {
 
 <style lang="scss" scoped>
 .general-step {
-  max-width: toRem(560);
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: toRem(20) toRem(32);
+
+  @include respond-to(medium) {
+    grid-gap: toRem(20);
+  }
+
+  @include respond-to(tablet) {
+    grid-template-columns: unset;
+  }
 }
 
-.general-step .general-step__project-name {
-  margin-top: toRem(20);
+.general-step__project-name {
+  grid-column: 1;
 }
 </style>

src/forms/ContractCreationForm/components/StepTabs.vue

@@ -37,6 +37,15 @@ defineProps<{
   display: flex;
   align-items: center;
   gap: toRem(12);
+
+  @include respond-to(tablet) {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @include respond-to(xsmall) {
+    grid-template-columns: unset;
+  }
 }
 
 .step-tabs__step {
@@ -76,6 +85,22 @@ defineProps<{
   }
 
   @include body-3-medium;
+
+  @include respond-to(medium) {
+    max-width: unset;
+  }
+
+  @include respond-to(tablet) {
+    &:nth-child(3) {
+      grid-column: 1/3;
+    }
+  }
+
+  @include respond-to(xsmall) {
+    &:nth-child(3) {
+      grid-column: unset;
+    }
+  }
 }
 
 .step-tabs__step-order {

src/forms/ContractCreationForm/components/index.ts

@@ -1,4 +1,4 @@
 export { default as ArbitrumStep } from './ArbitrumStep.vue'
-export { default as EthereumStep } from '@/forms/ContractCreationForm/components/EthereumStep/index.vue'
+export { default as EthereumStep } from './EthereumStep/index.vue'
 export { default as GeneralStep } from './GeneralStep.vue'
 export { default as StepTabs } from './StepTabs.vue'

src/forms/ContractCreationForm/index.vue

@@ -30,7 +30,7 @@
         />
       </transition>
     </div>
-    <div class="contract-creation-form__controllers">
+    <div class="contract-creation-form__buttons">
       <app-button
         class="contract-creation-form__btn"
         color="secondary"
@@ -309,10 +309,18 @@ const onBackBtnClick = () => {
   border-image-slice: 1;
   border-image-source: linear-gradient(180deg, #7c7c7d 0%, #cacaca 100%);
   background: linear-gradient(180deg, #222322 0%, #1d201c 100%);
+
+  @include respond-to(medium) {
+    padding: toRem(20) toRem(16) toRem(14);
+  }
 }
 
 .contract-creation-form__step-tabs {
   margin-top: toRem(24);
+
+  @include respond-to(medium) {
+    margin-top: toRem(16);
+  }
 }
 
 .contract-creation-form__divider {
@@ -323,24 +331,44 @@ const onBackBtnClick = () => {
     rgba(255, 255, 255, 0.48) 0%,
     rgba(255, 255, 255, 0.08) 100%
   );
+
+  @include respond-to(medium) {
+    margin-top: toRem(16);
+  }
 }
 
 .contract-creation-form__step {
   margin-top: toRem(24);
+
+  @include respond-to(medium) {
+    margin-top: toRem(16);
+  }
 }
 
-.contract-creation-form__controllers {
+.contract-creation-form__buttons {
   margin-top: toRem(32);
   margin-left: auto;
   display: flex;
   align-items: center;
   justify-content: end;
   gap: toRem(16);
+
+  @include respond-to(medium) {
+    margin-top: toRem(24);
+  }
+
+  @include respond-to(xsmall) {
+    flex-direction: column-reverse;
+  }
 }
 
 .contract-creation-form__btn {
   width: 100%;
   max-width: toRem(272);
+
+  @include respond-to(medium) {
+    max-width: unset;
+  }
 }
 
 .contract-creation-form__btn-text {

src/pages/Mor20Ecosystem/ContractCreationPage.vue

@@ -180,6 +180,7 @@ watch(
   display: flex;
   flex-direction: column;
   align-items: center;
+  padding-bottom: toRem(100);
 
   &:before {
     $z-index: -1;

src/styles/variables.scss

@@ -130,6 +130,11 @@
   --field-label: var(--text-secondary-main);
   --field-label-margin-bottom: #{toRem(6)};
 
+  @include respond-to(medium) {
+    --field-label-font-size: #{toRem(14)};
+    --field-label-line-height: #{toRem(20)};
+  }
+
   /* text */
   --field-text-font-family: var(--app-font-family);
   --field-text-font-size: #{toRem(18)};