New Responsive design

2026-05-23 18:08:27 +02:00
parent 3fdbaf0285
commit 0d436d8190
19 changed files with 2152 additions and 607 deletions
@@ -116,8 +116,10 @@ const next = () => {
            <tr>
                <td>PLZ, Ort:</td>
                <td>
-                    <input maxlength="5" type="text" v-model="props.formData.plz" style="width: 100px; margin-right: 8px;" />
-                    <input type="text" v-model="props.formData.ort" style="width: calc(100% - 110px);" />
+                    <div class="plz-ort-row">
+                        <input maxlength="5" type="text" v-model="props.formData.plz" class="plz-input" placeholder="PLZ" />
+                        <input type="text" v-model="props.formData.ort" class="ort-input" placeholder="Ort" />
+                    </div>
                    <ErrorText :message="errors.plz" />
                    <ErrorText :message="errors.ort" />
                </td>
@@ -132,3 +134,28 @@ const next = () => {
        </table>
    </div>
 </template>
+
+<style scoped>
+.plz-ort-row {
+    display: flex;
+    gap: 8px;
+    width: 100%;
+}
+
+.plz-input {
+    flex: 0 0 100px;
+    width: 100px;
+}
+
+.ort-input {
+    flex: 1;
+    min-width: 0;
+}
+
+@media (max-width: 639px) {
+    .plz-input {
+        flex: 0 0 80px;
+        width: 80px;
+    }
+}
+</style>