glib-web 6.0.0 → 6.0.1

package/app.scss

@@ -1,3 +1,22 @@
+/**
+ * Vuetify 3 bundled sanitize.css which reset all element margins via `* { margin: 0; padding: 0 }`.
+ * Vuetify 4 dropped sanitize.css in favour of a lighter CSS-layers reset that does NOT zero
+ * browser-default margins on block elements. We restore the relevant resets here explicitly so
+ * that layout behaves the same as it did under Vuetify 3.
+ *
+ * Padding is intentionally NOT reset on h1–h6, p, li, figure, figcaption, dl: browsers add no
+ * default padding to those elements, so a reset is a visual no-op — but an unlayered `padding: 0`
+ * would override Vuetify 4 spacing utilities (pb-*, pt-*, px-* …) which live in
+ * @layer vuetify-utilities and lose to any unlayered CSS.
+ */
+h1, h2, h3, h4, h5, h6, p, blockquote, pre, ol, ul, li, figure, figcaption, dl, dd {
+  margin: 0;
+}
+// Only reset padding where the browser UA actually sets a non-zero default.
+blockquote, pre, ol, ul, dd {
+  padding: 0;
+}
+
 .border-\[2px\] {
   border-width: 2px;
 }

package/components/panels/flow.vue

@@ -35,6 +35,18 @@ export default {
     cssClasses: function () {
       const classes = this.$classes().concat("layouts-flow");
 
+      // Use Vuetify utility classes for display/flex-wrap so that responsive
+      // display overrides (d-sm-none, d-none, d-md-flex …) provided via the
+      // spec's styleClasses live in the same @layer vuetify-utilities.helpers
+      // and Vuetify's own CSS source order makes them win over these defaults.
+      if (!classes.includes("d-flex") && !classes.includes("d-none") &&
+          !classes.includes("d-block") && !classes.includes("d-inline")) {
+        classes.push("d-flex");
+      }
+      if (!classes.some((c) => typeof c === "string" && c.startsWith("flex-"))) {
+        classes.push("flex-wrap");
+      }
+
       const configs = {
         'top': 'align-start',
         'middle': 'align-center',
@@ -148,13 +160,10 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-.layouts-flow {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-/* .layouts-horizontal > div {
-  display: inline-block;
-} */
-</style>
+<!-- No CSS for display/flex-wrap here.
+     In Vuetify 4, responsive display classes (d-sm-none, d-none …) live in
+     @layer vuetify-utilities.helpers. Any author CSS that sets display
+     (even in a lower-priority layer) can interfere because of layer ordering
+     in the Vite module graph. Instead we add d-flex and flex-wrap as Vuetify
+     utility class strings in cssClasses() so they sit in the same layer as
+     d-sm-none/d-none and Vuetify's source order makes responsive classes win. -->

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "glib-web",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "description": "",
   "main": "index.js",
   "scripts": {