Fix UI wrapping on mobile

2025-06-29 11:11:01 -07:00
parent 1402d5b4c1
commit b51b2236d5
3 changed files with 89 additions and 74 deletions
@@ -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>

@@ -46,3 +47,4 @@
      </div>
    </div>
  </div>
+</div>
@@ -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>

@@ -46,3 +47,4 @@
      </div>
    </div>
  </div>
+</div>
@@ -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{