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

fix(ui): standardize tile-based layouts across input, product card, and terminal preview components

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-03 12:37:57 +00:00
parent 23d672040c
commit 42fd0b276e
8 changed files with 132 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
ts_web/elements/00group-input/dees-input-code/dees-input-code.ts
View File

@@ -12,6 +12,7 @@ import { themeDefaultStyles } from '../../00theme.js';
import { DeesModal } from '../../00group-overlay/dees-modal/dees-modal.js';
import '../../00group-utility/dees-icon/dees-icon.js';
import '../../00group-layout/dees-label/dees-label.js';
import '../../00group-layout/dees-tile/dees-tile.js';
import '../../00group-workspace/dees-workspace-monaco/dees-workspace-monaco.js';
import { DeesWorkspaceMonaco } from '../../00group-workspace/dees-workspace-monaco/dees-workspace-monaco.js';
@@ -105,24 +106,16 @@ export class DeesInputCode extends DeesInputBase<string> {
min-height: 0;
}
.code-container {
display: flex;
flex-direction: column;
dees-tile {
flex: 1;
min-height: 0;
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
border-radius: 6px;
overflow: hidden;
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
}
.toolbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
padding: 4px 12px;
gap: 8px;
}
@@ -256,8 +249,8 @@ export class DeesInputCode extends DeesInputBase<string> {
</style>
<div class="input-wrapper">
<dees-label .label=${this.label} .description=${this.description} .required=${this.required}></dees-label>
<div class="code-container">
<div class="toolbar">
<dees-tile>
<div slot="header" class="toolbar">
<div class="toolbar-left">
<div class="language-selector">
<button
@@ -322,7 +315,7 @@ export class DeesInputCode extends DeesInputBase<string> {
@content-change=${this.handleContentChange}
></dees-workspace-monaco>
</div>
</div>
</dees-tile>
</div>
`;
}