Просмотр исходного кода

fix: let the argument form grid shrink on narrow screens (#1128)

The scoped rule dropped the minmax(0, ...) wrappers from femtocrank's
base form grid, so the tracks could never shrink below min-content and
the form demanded ~525px. With no width breakpoint anywhere in the
frontend, a 390px browser widened its layout viewport to 573px to fit
and scaled the whole page down.

Restoring the wrappers leaves the desktop grid identical (measured at
1280px: 299.922px 449.531px 434.547px, before and after) and lets the
same grid collapse to one column under 600px.
zoë b 4 недель назад
Родитель
Сommit
daec7a9431
1 измененных файлов с 15 добавлено и 1 удалено
  1. 15 1
      frontend/resources/vue/views/ArgumentForm.vue

+ 15 - 1
frontend/resources/vue/views/ArgumentForm.vue

@@ -700,7 +700,21 @@ onUnmounted(() => {
 }
 
 form {
-  grid-template-columns: max-content auto auto;
+  grid-template-columns: minmax(0, max-content) minmax(0, auto) minmax(0, auto);
+}
+
+@media (max-width: 600px) {
+  form {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  form input:not([type="checkbox"]):not([type="radio"]),
+  form textarea,
+  form select {
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+  }
 }
 
 .argument-description {