design.estate/dees-wcctools
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(wcc-properties): Improve wcc-properties CSS to prevent grid overflow, properly size and center icon glyphs, and adjust right-side offset

Browse Source
This commit is contained in:
Jürgen Kunz
2025-12-21 18:24:46 +00:00
parent 36dd6b5064
commit 0068c0749d
3 changed files with 19 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
changelog.md
View File

@@ -1,5 +1,13 @@
# Changelog # Changelog
## 2025-12-21 - 3.1.1 - fix(wcc-properties)
Improve wcc-properties CSS to prevent grid overflow, properly size and center icon glyphs, and adjust right-side offset
- Use minmax(0, 1fr) for grid-template-columns (selectorButtons1/2/4/5) to avoid flexbox overflow and ensure consistent column sizing
- Add min-width/min-height and inline-flex centering to .material-symbols-outlined to stabilize icon sizing and vertical/horizontal alignment
- Increase right calc offset from 520px to 600px to accommodate wider content/controls
- Changes applied in ts_web/elements/wcc-properties.ts
## 2025-12-19 - 3.1.0 - feat(wcc-properties) ## 2025-12-19 - 3.1.0 - feat(wcc-properties)
add Share selector with inline Record button and adjust properties panel grid layout add Share selector with inline Record button and adjust properties panel grid layout

2
ts_web/00_commitinfo_data.ts
View File

@@ -3,6 +3,6 @@
*/ */
export const commitinfo = { export const commitinfo = {
name: '@design.estate/dees-wcctools', name: '@design.estate/dees-wcctools',
version: '3.1.0', version: '3.1.1',
description: 'A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.' description: 'A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.'
} }

15
ts_web/elements/wcc-properties.ts
View File

@@ -207,22 +207,22 @@ export class WccProperties extends DeesElement {
} }
.selectorButtons2 { .selectorButtons2 {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: repeat(2, minmax(0, 1fr));
flex: 1; flex: 1;
} }
.selectorButtons4 { .selectorButtons4 {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, minmax(0, 1fr));
flex: 1; flex: 1;
} }
.selectorButtons5 { .selectorButtons5 {
display: grid; display: grid;
grid-template-columns: repeat(5, 1fr); grid-template-columns: repeat(5, minmax(0, 1fr));
flex: 1; flex: 1;
} }
.selectorButtons1 { .selectorButtons1 {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: minmax(0, 1fr);
flex: 1; flex: 1;
} }
.button { .button {
@@ -259,6 +259,11 @@ export class WccProperties extends DeesElement {
.button .material-symbols-outlined { .button .material-symbols-outlined {
font-size: 18px; font-size: 18px;
font-variation-settings: 'FILL' 0, 'wght' 300; font-variation-settings: 'FILL' 0, 'wght' 300;
min-width: 18px;
min-height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
} }
.button.selected .material-symbols-outlined { .button.selected .material-symbols-outlined {
@@ -301,7 +306,7 @@ export class WccProperties extends DeesElement {
top: 0.5rem; top: 0.5rem;
bottom: 0.5rem; bottom: 0.5rem;
left: 0.5rem; left: 0.5rem;
right: calc(520px + 0.5rem); right: calc(600px + 0.5rem);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;