fix: fix PropertyBase for small screens

CHANGELOG.md

@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.9.5] - 2026-03-23
+
+### Fix
+- fix `PropertyBase` for small screen sizes to wrap its content
+
 ## [0.9.4] - 2026-03-22
 
 ### Changed

package.json

@@ -10,7 +10,7 @@
     "access": "public"
   },
   "license": "MPL-2.0",
-  "version": "0.9.4",
+  "version": "0.9.5",
   "files": [
     "dist"
   ],

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

@@ -56,58 +56,73 @@ export const PropertyBase = ({
   const isRemoveEnabled = allowRemove && !readOnly
   const showActionsContainer = isClearEnabled || isRemoveEnabled
 
+  const renderActionButtons = () => (
+    <>
+      {isClearEnabled && (
+        <IconButton
+          tooltip={translation('clearValue')}
+          onClick={onValueClear}
+          disabled={!hasValue}
+          color="negative"
+          coloringStyle="text"
+          size="sm"
+        >
+          <X className="size-force-5" />
+        </IconButton>
+      )}
+      {isRemoveEnabled && (
+        <IconButton
+          tooltip={translation('removeProperty')}
+          onClick={onRemove}
+          color="negative"
+          coloringStyle="text"
+          size="sm"
+        >
+          <Trash className="size-force-5" />
+        </IconButton>
+      )}
+    </>
+  )
+
   return (
     <div
-      className={clsx('group/property', className)}
+      className={clsx('group/property min-w-0 w-full', className)}
       data-name="property-root"
       data-invalid={PropsUtil.dataAttributes.bool(invalid)}
     >
-      <div
-        data-name="property-title"
-        data-invalid={PropsUtil.dataAttributes.bool(invalid)}
-      >
-        <Tooltip tooltip={name} containerClassName="min-w-0">
-          <div className="flex-row-1 items-center">
-            <div data-name="property-title-icon">{icon}</div>
-            <span data-name="property-title-text">{name}</span>
-          </div>
-        </Tooltip>
-        {invalid && (
-          <AlertTriangle className="size-force-6"/>
-        )}
-      </div>
-      <div
-        data-name="property-content"
-        data-invalid={PropsUtil.dataAttributes.bool(invalid)}
-      >
-        {children({ required, hasValue, invalid })}
-        {showActionsContainer && (
-          <div data-name="property-actions">
-            {isClearEnabled && (
-              <IconButton
-                tooltip={translation('clearValue')}
-                onClick={onValueClear}
-                disabled={!hasValue}
-                color="negative"
-                coloringStyle="text"
-                size="sm"
-              >
-                <X className="size-force-5" />
-              </IconButton>
-            )}
-            {isRemoveEnabled && (
-              <IconButton
-                tooltip={translation('removeProperty')}
-                onClick={onRemove}
-                color="negative"
-                coloringStyle="text"
-                size="sm"
-              >
-                <Trash className="size-force-5" />
-              </IconButton>
+      <div data-name="property-inner">
+        <div
+          data-name="property-title"
+          data-invalid={PropsUtil.dataAttributes.bool(invalid)}
+        >
+          <div className="flex min-w-0 flex-1 flex-row items-center justify-between gap-2">
+            <Tooltip tooltip={name} containerClassName="min-w-0">
+              <div className="flex-row-1 items-center">
+                <div data-name="property-title-icon">{icon}</div>
+                <span data-name="property-title-text">{name}</span>
+              </div>
+            </Tooltip>
+            {invalid && (
+              <AlertTriangle className="size-force-6 shrink-0"/>
             )}
           </div>
-        )}
+          {showActionsContainer && (
+            <div data-name="property-title-actions">
+              {renderActionButtons()}
+            </div>
+          )}
+        </div>
+        <div
+          data-name="property-content"
+          data-invalid={PropsUtil.dataAttributes.bool(invalid)}
+        >
+          {children({ required, hasValue, invalid })}
+          {showActionsContainer && (
+            <div data-name="property-actions">
+              {renderActionButtons()}
+            </div>
+          )}
+        </div>
       </div>
     </div>
   )

src/style/theme/components/property.css

@@ -1,13 +1,17 @@
 @layer components {
-  [data-name="property-root"] {
-    @apply flex-row-0 rounded-xl;
+  [data-name="property-inner"] {
+    @apply flex-row-0 w-full min-w-0;
   }
 
   [data-name="property-root"] {
+    @apply rounded-xl;
+    container-type: inline-size;
+    container-name: property;
     transition: outline-offset var(--animation-duration-in, 250ms);
     outline-offset: 0;
 
     &:hover {
+
       [data-name="property-title"]:not([data-invalid]),
       [data-name="property-content"]:not([data-invalid]) {
         @apply border-primary;
@@ -33,7 +37,6 @@
     }
   }
 
-
   [data-name="property-title"] {
     @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;
 
@@ -46,7 +49,6 @@
     }
   }
 
-
   [data-name="property-title-icon"] {
     @apply max-w-6 min-w-6;
   }
@@ -67,10 +69,36 @@
     }
   }
 
+  [data-name="property-title-actions"] {
+    @apply hidden flex-row-2 items-center gap-1 shrink-0;
+  }
+
   [data-name="property-actions"] {
     @apply flex-row-2 items-center gap-1;
   }
 
+  @container property (max-width: 32rem) {
+    [data-name="property-inner"] {
+      @apply flex-col;
+    }
+
+    [data-name="property-title"] {
+      @apply max-w-none min-w-0 w-full rounded-none rounded-t-xl border-r-2 border-b-0;
+    }
+
+    [data-name="property-title-actions"] {
+      @apply flex;
+    }
+
+    [data-name="property-actions"] {
+      @apply hidden;
+    }
+
+    [data-name="property-content"] {
+      @apply rounded-none rounded-b-xl border-t-0 border-l-2 border-r-2 min-h-0;
+    }
+  }
+
   [data-name="property-input-wrapper"] {
     @apply relative flex-row-2 w-full;
 
@@ -87,6 +115,13 @@
   [data-name="property-input"] {
     @apply rounded p-1;
 
+    &[type="date"]::-webkit-calendar-picker-indicator,
+    &[type="datetime-local"]::-webkit-calendar-picker-indicator,
+    &[type="time"]::-webkit-calendar-picker-indicator {
+      display: none;
+      -webkit-appearance: none;
+    }
+
     &[data-invalid] {
       @apply bg-surface-warning placeholder-warning;
     }