@visns-studio/visns-components 6.32.1 → 6.32.2

package/README.md

@@ -9,6 +9,18 @@ A comprehensive React component library used by the VISNS Studio team for CRM an
 
 VISNS Components is a React-based UI component library that provides a set of reusable, consistent, and customizable components for building web applications. It includes components for authentication, data grids, forms, navigation, and more, designed to work seamlessly together.
 
+## Recent Updates (v6.32.2)
+
+### Boxed overview: no panel around the cards
+
+Follow-up to 6.32.1. With every section drawn as its own card, the tab-body
+panel around them was a card holding cards — a white frame with its own
+border and shadow around five framed sections. In boxed mode the panel is now
+transparent and the section cards sit directly on the page, flush with the
+tab strip (CSS only: `.grid__subcontent:has(.gridtxt--boxed)` and
+`.grid__full:has(.gridtxt--boxed)` drop their surface and padding). Plain
+mode keeps its panel; nothing changes for apps that did not opt in.
+
 ## Recent Updates (v6.32.1)
 
 ### Boxed overview: one card per section, no note accent

package/package.json

@@ -93,7 +93,7 @@
         "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "6.32.1",
+    "version": "6.32.2",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/styles/GenericDetail.module.scss

@@ -521,10 +521,35 @@
 /* The panel's own inset is dialled back once the sections are cards: the tab
    card already pads, and `.gridtxt`'s 1rem/1.5rem on top of a card border on
    top of the `<ul>`'s 0.85rem stacked three insets between the panel edge and
-   the first field. Small but not zero — the cards still need to sit off the
-   panel border. */
+   the first field. Zero: the panel around the boxed overview is transparent
+   (next rule), so the section cards ARE the surface and there is no panel
+   border to sit off. */
 .gridtxt.gridtxt--boxed {
-    padding: var(--spacing-sm, 0.5rem);
+    padding: 0;
+}
+
+/* The tab-body panel is a card (`card-surface`). Around a boxed overview that
+   is a card holding cards — a white frame with its own border and shadow drawn
+   around five framed sections — so the panel gives up its surface and the
+   section cards sit directly on the page. Same `:has()` device the DataGrid
+   repair below uses; `:has` is the only way this file can reach an ancestor
+   from the modifier the JSX sets on the overview. Plain mode never carries
+   `.gridtxt--boxed`, so it keeps its panel.
+
+   Both panels are named: `.grid__subcontent` is the tab-body column that
+   actually frames the overview in the stacked layout, and `.grid__full` is
+   the card the older rail layout and the stage-bar branch wrap it in. The
+   padding goes with the frame — with nothing drawn around them the cards
+   align to the tab strip's own edge — and overflow is released so the last
+   card's shadow is not clipped. */
+.grid__subcontent:has(.gridtxt--boxed),
+.grid__full:has(.gridtxt--boxed) {
+    background: transparent;
+    border: 0;
+    box-shadow: none;
+    border-radius: 0;
+    padding: 0;
+    overflow: visible;
 }
 
 /* One section, one card. `overflow: hidden` is what lets the square heading