@7365admin1/layer-common 3.2.2-staging.145 → 3.2.2-staging.147

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -201,9 +201,21 @@ const selectItem = (value: string) => {
201
201
  color: var(--text);
202
202
  }
203
203
 
204
- .switch-context__panel {
205
- border-radius: var(--r-menu);
206
- box-shadow: var(--shadow-menu);
204
+ /* The panel is a `v-card`, and Vuetify puts it inside `.v-overlay__content`.
205
+ `screens.css` gives EVERY card in an overlay the modal shape - 16px and the
206
+ modal shadow - with `!important`, because dialogs open from sixty components
207
+ and the shape had to be stated once. A menu is an overlay too, so the panel
208
+ was silently taking the modal shape: measured 16px and
209
+ `rgba(10, 12, 16, 0.3) 0 24px 64px`, not the 14px `--r-menu` and the lighter
210
+ `--shadow-menu` it asks for.
211
+ `!important` alone does NOT win it back: `.switch-context__panel[data-v-...]`
212
+ and `.v-overlay__content > .v-card` are both two classes, the scope attribute
213
+ counts, and a tie goes to whichever sheet loaded last - which is screens.css.
214
+ Measured still 16px with `!important` on the plain class. So the selector
215
+ carries the overlay class too, to out-specify rather than tie. */
216
+ .v-overlay__content > .switch-context__panel {
217
+ border-radius: var(--r-menu) !important;
218
+ box-shadow: var(--shadow-menu) !important;
207
219
  border: 1px solid var(--border);
208
220
  background: var(--card);
209
221
  padding: 14px;
@@ -219,9 +231,16 @@ const selectItem = (value: string) => {
219
231
  }
220
232
 
221
233
  /* The profile menu's row, to the pixel - same padding, same radius, same
222
- weight - because it is the same control one panel over. */
234
+ weight - because it is the same control one panel over.
235
+ `!important` ONLY on the radius, and it is not optional: a `v-list` with no
236
+ `rounded` prop stamps Vuetify's own `rounded-0` utility onto every
237
+ `v-list-item` inside it, and that utility IS `!important`. So this rule was
238
+ losing silently - measured `0px`, not the 9px it asks for - and the hover
239
+ painted a square block inside a 14px-rounded panel. The header's rows escape
240
+ it only because they are plain `<button>`s, which is why the two menus did
241
+ not match despite the same value. */
223
242
  .switch-context__row {
224
- border-radius: var(--r-inner-sm);
243
+ border-radius: var(--r-inner-sm) !important;
225
244
  font-size: var(--fs-btn);
226
245
  font-weight: var(--fw-btn);
227
246
  color: var(--text2);
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@7365admin1/layer-common",
3
3
  "license": "MIT",
4
4
  "type": "module",
5
- "version": "3.2.2-staging.145",
5
+ "version": "3.2.2-staging.147",
6
6
  "author": "7365admin1",
7
7
  "main": "./nuxt.config.ts",
8
8
  "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",