Fix design errors (#831)

guergana · web-flow · commit 13b47c744389 · 2024-01-16T15:30:40.000+01:00
Bug: T347190
diff --git a/resources/js/Components/ItemIdSearchTextarea.vue b/resources/js/Components/ItemIdSearchTextarea.vue
@@ -13,6 +13,9 @@
           :status="validationError ? validationError.type : 'default'"
           v-model="textareaInputValue"
       />
+      <template #label>
+			{{$i18n('item-form-id-input-label')}}
+		</template>
   </cdx-field>
 </template>
 
@@ -92,6 +95,7 @@ defineExpose({validate, serializeInput, validationError});
 </script>
 
 <style lang="scss">
+@import '~@wmde/wikit-tokens/dist/_variables.scss';
 
 .cdx-field__control {
     position: relative;
@@ -105,6 +109,10 @@ defineExpose({validate, serializeInput, validationError});
         .cdx-progress-bar {
             width: 50%;
             margin: auto;
+
+            @media (max-width: $width-breakpoint-tablet) {
+                width: 80%;
+            }
         }
     }
 }
diff --git a/resources/js/Pages/Home.vue b/resources/js/Pages/Home.vue
@@ -197,21 +197,5 @@ function showRandom(): void{
     .form-buttons {
         text-align: end;
     }
-
-    .cdx-field__control {
-        position: relative;
-        width: 100%;
-
-        .progress-bar-wrapper {
-            position: absolute;
-            top: 50%;
-            width: 100%;
-
-            .cdx-progress-bar {
-                width: 50%;
-                margin: auto;
-            }
-        }
-    }
 }
 </style>
