Skip to content

Commit 9eb9341

Browse files
committed
[FIX] #1503 min-width for ResponsiveLayout Component
1 parent dab7174 commit 9eb9341

File tree

1 file changed

+4
-3
lines changed

1 file changed

+4
-3
lines changed

client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ const ColWrapper = styled(Col)<{
8787
flex-basis: ${(props) =>
8888
props.$rowBreak
8989
? `calc(100% / var(--columns))` // Force exact column distribution
90-
: `clamp(${props.$minWidth}, 100% / var(--columns), 100%)`}; // MinWidth respected
90+
: `clamp(${props.$minWidth || "0px"}, calc(100% / var(--columns)), 100%)`}; // MinWidth respected
9191
9292
min-width: ${(props) => props.$minWidth}; // Ensure minWidth is respected
9393
max-width: 100%; // Prevent more columns than allowed
@@ -237,7 +237,8 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => {
237237
if (!containers[id]) return null;
238238
const containerProps = containers[id].children;
239239

240-
const calculatedWidth = 100 / numberOfColumns;
240+
// Use the actual minWidth from column configuration instead of calculated width
241+
const columnMinWidth = column.minWidth || `${100 / numberOfColumns}px`;
241242

242243
return (
243244
<ColWrapper
@@ -247,7 +248,7 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => {
247248
sm={rowBreak ? 24 / numberOfColumns : undefined}
248249
xs={rowBreak ? 24 / numberOfColumns : undefined}
249250
$style={props.columnStyle}
250-
$minWidth={`${calculatedWidth}px`}
251+
$minWidth={columnMinWidth}
251252
$matchColumnsHeight={matchColumnsHeight}
252253
$rowBreak={rowBreak}
253254
>

0 commit comments

Comments
 (0)