Skip to content

Commit b3b27c1

Browse files
DasProffiDasProffi
authored
fix: fix PropertyBase for small screens (#224)
1 parent 3cf3d88 commit b3b27c1

4 files changed

Lines changed: 105 additions & 50 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
55
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
66
and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
77

8+
## [0.9.5] - 2026-03-23
9+
10+
### Fix
11+
- fix `PropertyBase` for small screen sizes to wrap its content
12+
813
## [0.9.4] - 2026-03-22
914

1015
### Changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"access": "public"
1111
},
1212
"license": "MPL-2.0",
13-
"version": "0.9.4",
13+
"version": "0.9.5",
1414
"files": [
1515
"dist"
1616
],

‎src/components/user-interaction/properties/PropertyBase.tsx‎

Lines changed: 60 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -56,58 +56,73 @@ export const PropertyBase = ({
5656
const isRemoveEnabled = allowRemove && !readOnly
5757
const showActionsContainer = isClearEnabled || isRemoveEnabled
5858

59+
const renderActionButtons = () => (
60+
<>
61+
{isClearEnabled && (
62+
<IconButton
63+
tooltip={translation('clearValue')}
64+
onClick={onValueClear}
65+
disabled={!hasValue}
66+
color="negative"
67+
coloringStyle="text"
68+
size="sm"
69+
>
70+
<X className="size-force-5" />
71+
</IconButton>
72+
)}
73+
{isRemoveEnabled && (
74+
<IconButton
75+
tooltip={translation('removeProperty')}
76+
onClick={onRemove}
77+
color="negative"
78+
coloringStyle="text"
79+
size="sm"
80+
>
81+
<Trash className="size-force-5" />
82+
</IconButton>
83+
)}
84+
</>
85+
)
86+
5987
return (
6088
<div
61-
className={clsx('group/property', className)}
89+
className={clsx('group/property min-w-0 w-full', className)}
6290
data-name="property-root"
6391
data-invalid={PropsUtil.dataAttributes.bool(invalid)}
6492
>
65-
<div
66-
data-name="property-title"
67-
data-invalid={PropsUtil.dataAttributes.bool(invalid)}
68-
>
69-
<Tooltip tooltip={name} containerClassName="min-w-0">
70-
<div className="flex-row-1 items-center">
71-
<div data-name="property-title-icon">{icon}</div>
72-
<span data-name="property-title-text">{name}</span>
73-
</div>
74-
</Tooltip>
75-
{invalid && (
76-
<AlertTriangle className="size-force-6"/>
77-
)}
78-
</div>
79-
<div
80-
data-name="property-content"
81-
data-invalid={PropsUtil.dataAttributes.bool(invalid)}
82-
>
83-
{children({ required, hasValue, invalid })}
84-
{showActionsContainer && (
85-
<div data-name="property-actions">
86-
{isClearEnabled && (
87-
<IconButton
88-
tooltip={translation('clearValue')}
89-
onClick={onValueClear}
90-
disabled={!hasValue}
91-
color="negative"
92-
coloringStyle="text"
93-
size="sm"
94-
>
95-
<X className="size-force-5" />
96-
</IconButton>
97-
)}
98-
{isRemoveEnabled && (
99-
<IconButton
100-
tooltip={translation('removeProperty')}
101-
onClick={onRemove}
102-
color="negative"
103-
coloringStyle="text"
104-
size="sm"
105-
>
106-
<Trash className="size-force-5" />
107-
</IconButton>
93+
<div data-name="property-inner">
94+
<div
95+
data-name="property-title"
96+
data-invalid={PropsUtil.dataAttributes.bool(invalid)}
97+
>
98+
<div className="flex min-w-0 flex-1 flex-row items-center justify-between gap-2">
99+
<Tooltip tooltip={name} containerClassName="min-w-0">
100+
<div className="flex-row-1 items-center">
101+
<div data-name="property-title-icon">{icon}</div>
102+
<span data-name="property-title-text">{name}</span>
103+
</div>
104+
</Tooltip>
105+
{invalid && (
106+
<AlertTriangle className="size-force-6 shrink-0"/>
108107
)}
109108
</div>
110-
)}
109+
{showActionsContainer && (
110+
<div data-name="property-title-actions">
111+
{renderActionButtons()}
112+
</div>
113+
)}
114+
</div>
115+
<div
116+
data-name="property-content"
117+
data-invalid={PropsUtil.dataAttributes.bool(invalid)}
118+
>
119+
{children({ required, hasValue, invalid })}
120+
{showActionsContainer && (
121+
<div data-name="property-actions">
122+
{renderActionButtons()}
123+
</div>
124+
)}
125+
</div>
111126
</div>
112127
</div>
113128
)

‎src/style/theme/components/property.css‎

Lines changed: 39 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
@layer components {
2-
[data-name="property-root"] {
3-
@apply flex-row-0 rounded-xl;
2+
[data-name="property-inner"] {
3+
@apply flex-row-0 w-full min-w-0;
44
}
55

66
[data-name="property-root"] {
7+
@apply rounded-xl;
8+
container-type: inline-size;
9+
container-name: property;
710
transition: outline-offset var(--animation-duration-in, 250ms);
811
outline-offset: 0;
912

1013
&:hover {
14+
1115
[data-name="property-title"]:not([data-invalid]),
1216
[data-name="property-content"]:not([data-invalid]) {
1317
@apply border-primary;
@@ -33,7 +37,6 @@
3337
}
3438
}
3539

36-
3740
[data-name="property-title"] {
3841
@apply flex-row-2 max-w-48 min-w-48 px-3 py-2 items-center justify-between rounded-l-xl border-2 border-r-0;
3942

@@ -46,7 +49,6 @@
4649
}
4750
}
4851

49-
5052
[data-name="property-title-icon"] {
5153
@apply max-w-6 min-w-6;
5254
}
@@ -67,10 +69,36 @@
6769
}
6870
}
6971

72+
[data-name="property-title-actions"] {
73+
@apply hidden flex-row-2 items-center gap-1 shrink-0;
74+
}
75+
7076
[data-name="property-actions"] {
7177
@apply flex-row-2 items-center gap-1;
7278
}
7379

80+
@container property (max-width: 32rem) {
81+
[data-name="property-inner"] {
82+
@apply flex-col;
83+
}
84+
85+
[data-name="property-title"] {
86+
@apply max-w-none min-w-0 w-full rounded-none rounded-t-xl border-r-2 border-b-0;
87+
}
88+
89+
[data-name="property-title-actions"] {
90+
@apply flex;
91+
}
92+
93+
[data-name="property-actions"] {
94+
@apply hidden;
95+
}
96+
97+
[data-name="property-content"] {
98+
@apply rounded-none rounded-b-xl border-t-0 border-l-2 border-r-2 min-h-0;
99+
}
100+
}
101+
74102
[data-name="property-input-wrapper"] {
75103
@apply relative flex-row-2 w-full;
76104

@@ -87,6 +115,13 @@
87115
[data-name="property-input"] {
88116
@apply rounded p-1;
89117

118+
&[type="date"]::-webkit-calendar-picker-indicator,
119+
&[type="datetime-local"]::-webkit-calendar-picker-indicator,
120+
&[type="time"]::-webkit-calendar-picker-indicator {
121+
display: none;
122+
-webkit-appearance: none;
123+
}
124+
90125
&[data-invalid] {
91126
@apply bg-surface-warning placeholder-warning;
92127
}

0 commit comments

Comments
 (0)