Fix UI wrapping on mobile

src/MistoxWebsite.Client/src/app/pages/store/admin/edititem/edit.component.html

@@ -1,4 +1,5 @@
 <div class="center">
+  <div class="column-content">
     <form class="big-frame background-border" style="width: 520px;"  #accountForm="ngForm" (ngSubmit)="onSubmit()">
       <h3>Edit Item</h3>
 
@@ -45,4 +46,5 @@
         <img [src]="cur" alt="Image Preview" style="max-width: 200px;"/>
       </div>
     </div>
+  </div>
 </div>

src/MistoxWebsite.Client/src/app/pages/store/admin/newitem/new.component.html

@@ -1,4 +1,5 @@
 <div class="center">
+  <div class="column-content">
     <form class="big-frame background-border" style="width: 520px;" #accountForm="ngForm" (ngSubmit)="onSubmit()">
       <h3>Create New Item</h3>
 
@@ -45,4 +46,5 @@
         <img [src]="cur" alt="Image Preview" style="max-width: 200px;"/>
       </div>
     </div>
+  </div>
 </div>

src/MistoxWebsite.Client/src/styles.css

@@ -29,6 +29,16 @@ main {
     min-height: 100vh;
 }
 
+.column-content {
+    columns: 2;
+}
+
+@media (max-width: 1620px) {
+    .column-content {
+        columns: 1;
+    }
+}
+
 .text-frame {
     margin: 50px !important;
     max-width: 2200px !important;
@@ -47,6 +57,7 @@ main {
     width: 400px;
     color: var(--Mistox-White);
     margin: 40px;
+    break-inside: avoid;
 }
 
 .big-frame h3{