Merged
Conversation
fileList
…idth Thulasizwe/en/form components width
- Removed unnecessary newline at the end of the file in ConfigurableItemAutocompleteComponent. - Cleaned up whitespace in the Factory function of RadioComponent for improved readability. - Updated the index in the add method for RichTextEditorComponent to ensure correct style migration.
…idth Thulasizwe/en/form components width
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
shesha-reactjs/src/designer-components/radio/radio.tsx (1)
41-44:⚠️ Potential issue | 🟡 MinorReplace
anytype with proper event type.The
anytype on line 41 violates the coding guideline to eliminateanyand use explicit type checking. Use the appropriate Radio event type.Proposed fix
- const onChangeInternal = (e: any): void => { - if (e.target) customEvents.onChange({ ...e, currentTarget: { value: e.target.value } }); + const onChangeInternal = (e: RadioChangeEvent): void => { + if (e.target) customEvents.onChange({ ...e, currentTarget: { value: e.target.value } });Note:
RadioChangeEventis already imported byRadioGroupfromantd/lib/radio. You may need to add this import at the top of the file:import type { RadioChangeEvent } from 'antd/lib/radio';As per coding guidelines: "Eliminate the
anytype; useunknowntype instead for values with unknown types, forcing explicit type checking."🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@shesha-reactjs/src/designer-components/radio/radio.tsx` around lines 41 - 44, The onChangeInternal handler currently uses the any type; change its parameter type to the proper radio event type (RadioChangeEvent) and add the corresponding import (import type { RadioChangeEvent } from 'antd/lib/radio') at the top of the file; update the signature of onChangeInternal(e: RadioChangeEvent): void and keep the existing calls to customEvents.onChange({ ...e, currentTarget: { value: e.target.value } }) and if (typeof onChange === 'function') onChange(e) so the event is strongly typed for onChangeInternal, customEvents.onChange and onChange usages.
♻️ Duplicate comments (2)
shesha-reactjs/src/designer-components/_settings/styles/styles.ts (1)
40-44:⚠️ Potential issue | 🟠 MajorUse a descendant selector for the Form.Item tooltip icon.
Ant Design renders the tooltip icon inside the
<label>content, not as an adjacent sibling of the label element, so+.ant-form-item-tooltipwill never match here. Switch this to a descendant selector such as& .ant-form-item-tooltip. (codefactor.io)♻️ Suggested fix
- +.ant-form-item-tooltip { + & .ant-form-item-tooltip { align-self: end !important; position: relative; top: 4px; }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@shesha-reactjs/src/designer-components/_settings/styles/styles.ts` around lines 40 - 44, The selector ".ant-form-item-tooltip" is currently written as an adjacent sibling selector "+.ant-form-item-tooltip" which never matches because Ant Design places the tooltip icon inside the label; update the selector in styles.ts to use a descendant selector (e.g., replace "+.ant-form-item-tooltip" with "& .ant-form-item-tooltip") so the rule targets the tooltip rendered inside Form.Item label content; locate the rule block that currently contains "+.ant-form-item-tooltip" and change it to the descendant form to fix the styling.shesha-reactjs/src/designer-components/richTextEditor/index.tsx (1)
74-74:⚠️ Potential issue | 🟡 Minor
rerenderKeystill ignores autofocus changes.Line 74 repeats
model?.placeholder, so toggling autofocus does not remount the editor even though autofocus is part of the computed config on Line 67. Use the resolved autofocus value as the second key fragment.🐛 Proposed fix
- const rerenderKey = `${model?.placeholder || ''}-${model?.placeholder || false}`; + const rerenderKey = `${model?.placeholder ?? ''}-${formMode === 'designer' ? false : model?.autofocus ?? false}`;🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@shesha-reactjs/src/designer-components/richTextEditor/index.tsx` at line 74, The rerenderKey currently duplicates model?.placeholder and therefore ignores autofocus changes; update the rerenderKey construction (the variable named rerenderKey) to use the resolved autofocus value (the computed autofocus/config value used when building the editor config) as the second fragment instead of repeating model?.placeholder so toggling autofocus will remount the editor.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@shesha-reactjs/src/designer-components/container/containerComponent.tsx`:
- Around line 83-88: The useMemo creating wrapperStyle references wrapperStyles
but does not include it in the dependency array, causing stale closures when
wrapperStyles changes; update the dependency list for that useMemo (the
wrapperStyle variable) to include wrapperStyles so the memo recomputes when
wrapperStyles updates (keep other dependencies: model, formData, globalState)
and ensure any helper calls like getLayoutStyle remain covered by those
dependencies.
In `@shesha-reactjs/src/designer-components/richTextEditor/index.tsx`:
- Around line 34-54: The Factory is still passing model dimensions into Jodit
via the config (the spread of ...(!model.autoHeight && { height, minHeight,
maxHeight }) and ...(!model.autoWidth && { width, minWidth, maxWidth })), which
re-applies sizing in designer mode; update the Factory logic inside the config
builder to detect designer mode (use formMode === 'designer' or
preserveDimensionsInDesigner flag) and when in designer mode do not forward the
model width/height/min/max values into the config—instead ensure the editor is
allowed to fill the wrapper (e.g., omit those spreads or set width/height to
'100%' only for designer mode) so sizing is controlled solely by
ConfigurableFormItem.
In `@shesha-reactjs/src/utils/style.ts`:
- Around line 25-34: The executed script result (executedValue returned from
executeScriptSync) is being cast to string|number|null|undefined before calling
parseDimension, which bypasses runtime validation; add a type guard to check
executedValue is a primitive string/number/null/undefined (or other allowed
shape) before recursing into parseDimension (and return null or throw/log if
it’s an unexpected type). Specifically update the block that calls
executeScriptSync to validate executedValue’s runtime type (using typeof checks
or an isAllowedResult helper) and only call parseDimension(executedValue,
context) when the guard passes; otherwise handle the invalid result
(console.error/process appropriate fallback) to avoid unsafe casting.
---
Outside diff comments:
In `@shesha-reactjs/src/designer-components/radio/radio.tsx`:
- Around line 41-44: The onChangeInternal handler currently uses the any type;
change its parameter type to the proper radio event type (RadioChangeEvent) and
add the corresponding import (import type { RadioChangeEvent } from
'antd/lib/radio') at the top of the file; update the signature of
onChangeInternal(e: RadioChangeEvent): void and keep the existing calls to
customEvents.onChange({ ...e, currentTarget: { value: e.target.value } }) and if
(typeof onChange === 'function') onChange(e) so the event is strongly typed for
onChangeInternal, customEvents.onChange and onChange usages.
---
Duplicate comments:
In `@shesha-reactjs/src/designer-components/_settings/styles/styles.ts`:
- Around line 40-44: The selector ".ant-form-item-tooltip" is currently written
as an adjacent sibling selector "+.ant-form-item-tooltip" which never matches
because Ant Design places the tooltip icon inside the label; update the selector
in styles.ts to use a descendant selector (e.g., replace
"+.ant-form-item-tooltip" with "& .ant-form-item-tooltip") so the rule targets
the tooltip rendered inside Form.Item label content; locate the rule block that
currently contains "+.ant-form-item-tooltip" and change it to the descendant
form to fix the styling.
In `@shesha-reactjs/src/designer-components/richTextEditor/index.tsx`:
- Line 74: The rerenderKey currently duplicates model?.placeholder and therefore
ignores autofocus changes; update the rerenderKey construction (the variable
named rerenderKey) to use the resolved autofocus value (the computed
autofocus/config value used when building the editor config) as the second
fragment instead of repeating model?.placeholder so toggling autofocus will
remount the editor.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 89cfe801-96ce-4774-878a-4f16b5c786a5
📒 Files selected for processing (7)
shesha-reactjs/src/components/formDesigner/components/styles.tsshesha-reactjs/src/designer-components/_settings/styles/styles.tsshesha-reactjs/src/designer-components/configurableItemAutocomplete/index.tsxshesha-reactjs/src/designer-components/container/containerComponent.tsxshesha-reactjs/src/designer-components/radio/radio.tsxshesha-reactjs/src/designer-components/richTextEditor/index.tsxshesha-reactjs/src/utils/style.ts
shesha-reactjs/src/designer-components/richTextEditor/index.tsx
Outdated
Show resolved
Hide resolved
- Introduced a new styles file for the ImageField component to manage styles more effectively. - Replaced inline styles with class-based styles for the image wrapper, improving maintainability and readability. - Updated the component to utilize the new styles, ensuring consistent layout and design.
- Moved height and width styling logic into the RichTextEditor component for better encapsulation. - Enhanced readability by restructuring the component's props for styling. - Ensured consistent application of dimensions based on model properties.
- Added a type guard function to validate dimension input types, ensuring they are string, number, null, or undefined. - Updated the dimension parsing logic to include validation of executed script results, improving error handling and robustness.
- Changed margin-bottom to margin in GlobalSheshaStyles for consistent spacing. - Restructured the RichTextEditorComponent's return statement for improved readability and clarity in JSX formatting. - Enhanced error logging in the style utility to include a trailing comma for better debugging.
… component - Updated the button margin from 'auto 0px' to '5px 0px' for better spacing consistency within the MultiColorInput component.
…idth Thulasizwe/en/form components width
Contributor
There was a problem hiding this comment.
Actionable comments posted: 8
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
shesha-reactjs/src/designer-components/radio/radio.tsx (1)
35-52:⚠️ Potential issue | 🟡 MinorImport
RadioChangeEventand replaceanywith the concrete type.Line 40:
onChangeInternalreceives a radio change event from AntD'sRadio.Group. AntD exportsRadioChangeEventas the concrete type for this handler. Import it from 'antd' and use it instead ofany:import { RadioChangeEvent } from 'antd'; const onChangeInternal = (e: RadioChangeEvent): void => { if (e.target) customEvents.onChange({ ...e, currentTarget: { value: e.target.value } }); if (typeof onChange === 'function') onChange(e); };🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@shesha-reactjs/src/designer-components/radio/radio.tsx` around lines 35 - 52, The onChangeInternal handler in the Factory component uses a loose any type; import Ant Design's RadioChangeEvent from 'antd' and replace the any with RadioChangeEvent for the onChangeInternal parameter, updating the function signature in Factory (onChangeInternal) and adding the import at the top of the file so the event is strongly typed when calling customEvents.onChange and onChange.
♻️ Duplicate comments (2)
shesha-reactjs/src/designer-components/configurableItemAutocomplete/index.tsx (1)
33-35:⚠️ Potential issue | 🟡 MinorRemove the
anyescape hatch here.Line 34 bypasses type checking on the filter payload. Use a precise partial/narrow filter type for this object instead of
as any, so the call toevaluateDynamicFiltersstays type-safe.As per coding guidelines, "Eliminate the
anytype; useunknowntype instead for values with unknown types, forcing explicit type checking."🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@shesha-reactjs/src/designer-components/configurableItemAutocomplete/index.tsx` around lines 33 - 35, The call to evaluateDynamicFilters currently uses an unsafe cast (`as any`) for the filter payload; replace it with a properly typed object (e.g., a Partial or narrowed type representing the filter expression) instead of `any`. Create or import the exact filter-expression type used by evaluateDynamicFilters (or declare a local interface like DynamicFilterExpression), then construct the payload as that typed shape (or use `unknown` and perform explicit runtime checks/conversion before passing) and pass [{ expression: filter }] typed accordingly; reference evaluateDynamicFilters and the local filter variable when updating the call site.shesha-reactjs/src/designer-components/richTextEditor/index.tsx (1)
72-72:⚠️ Potential issue | 🟡 MinorFix the copy/paste bug in
rerenderKey.Line 72 uses
model?.placeholdertwice, so the key never changes for the second condition it is supposed to track. Ifautofocusis the intended remount trigger, this should use that field instead.🐛 Proposed fix
- const rerenderKey = `${model?.placeholder || ''}-${model?.placeholder || false}`; + const rerenderKey = `${model?.placeholder || ''}-${model?.autofocus || false}`;🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@shesha-reactjs/src/designer-components/richTextEditor/index.tsx` at line 72, The rerenderKey is incorrectly using model?.placeholder twice so it doesn't change when autofocus toggles; update the key construction (the rerenderKey variable) to use model?.autofocus (or its string/coerced value) for the second segment instead of the duplicate model?.placeholder so the component remounts when autofocus changes.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@shesha-reactjs/src/components/mainLayout/styles/indexStyles.ts`:
- Around line 38-50: The current max-height set by
sheshaStyles.pageHeadingHeight is preventing the .sha-paging-height rule from
expanding to 46px; update the styles so .sha-paging-height also overrides
max-height (e.g., set max-height: 46px !important) and ensure the selector (the
.sha-paging-height block in indexStyles.ts) has equal or greater specificity
than the existing max-height rule so its height: 46px can take effect.
- Around line 4-6: The file defines duplicated theme constants (shaBorder,
shaPageHeadingHeight, layoutHeaderHeight) that mirror sheshaStyles.border,
sheshaStyles.pageHeadingHeight, and sheshaStyles.layoutHeaderHeight; remove
these duplicate constants and update any local usages in this module to
reference the canonical sheshaStyles properties (sheshaStyles.border,
sheshaStyles.pageHeadingHeight, sheshaStyles.layoutHeaderHeight) so the
component reads from the shared theme only.
- Around line 59-75: Remove the dead legacy Ant Design 4 selector block
targeting .${(p) => p.theme.prefixCls}-select-dropdown--multiple -> .${(p) =>
p.theme.prefixCls}-select-dropdown-menu -> .${(p) =>
p.theme.prefixCls}-select-dropdown-menu-item and its selected-rule (the entire
nested rule that hides .${(p) =>
p.theme.prefixCls}-select-dropdown-menu-item-selected); leave the remaining Ant
Design 5 selector block that targets .${(p) =>
p.theme.prefixCls}-select-dropdown -> .${(p) => p.theme.prefixCls}-select-item
-> .${(p) => p.theme.prefixCls}-select-item-option-selected intact.
In
`@shesha-reactjs/src/designer-components/configurableItemAutocomplete/index.tsx`:
- Around line 61-63: The JSON.parse call on the string branch can throw for
malformed input; wrap the parse in a try/catch inside the code that returns
parsed value so that if JSON.parse(expression) throws you return undefined
instead of bubbling the error. Concretely, in the expression handling (the
ternary that currently does typeof (expression) === 'string' ?
JSON.parse(expression) : expression) change the string branch to attempt
JSON.parse(expression) in a try/catch and return undefined on catch; keep the
non-string branch returning expression unchanged.
- Around line 28-29: The async memo callback that computes evaluatedFilter reads
propertyMetadataAccessor (from useNestedPropertyMetadatAccessor) but the
dependency array passed to useAsyncDeepCompareMemo omits it; update the
dependencies for useAsyncDeepCompareMemo to include propertyMetadataAccessor so
evaluatedFilter is recomputed when model.entityType/metadata changes (ensure
propertyMetadataAccessor is the same reference returned by
useNestedPropertyMetadatAccessor).
In `@shesha-reactjs/src/designer-components/image/styles.ts`:
- Around line 4-8: The wrapper CSS in imageWrapper should not hard-code
width:100%; remove the width rule from the cx(...) in styles.ts and instead let
the FormItem/applying code (the ImageComponent factory that builds finalStyles)
apply the configured dimensions to the wrapper; ensure ImageField continues to
forward dimensions to the inner <Image> but the inner image uses width: '100%'
and height: '100%' so it fills the wrapper. Update imageWrapper (remove
width:100%), confirm ImageComponent (finalStyles) places configured width/height
on the wrapper, and verify ImageField/<Image> uses 100% sizing to avoid double
percentage application and mispositioned absolute buttons.
In `@shesha-reactjs/src/designer-components/richTextEditor/index.tsx`:
- Around line 43-68: The Jodit config currently built in
useDeepCompareMemoKeepReference (PartialRichTextEditorConfig) omits explicit
dimension fields so Jodit ignores wrapper CSS; update the config creation in
index.tsx to copy relevant size properties from getStyle(model?.style, formData)
(or directly from model) into config.width, config.height, config.minWidth,
config.maxWidth, config.minHeight and config.maxHeight so the editor receives
explicit dimensions (leave the existing style prop for wrapper CSS but ensure
these six properties are set on the config object returned by the memoized
function).
In `@shesha-reactjs/src/utils/style.ts`:
- Around line 27-56: parseDimension currently handles IPropertySetting only when
_mode === 'code' and falls through to return null for objects with _mode ===
'value'; modify parseDimension to detect objects where value._mode === 'value'
and value._value is defined, then recursively call parseDimension(value._value,
context) before the final string check so the underlying dimension is extracted;
keep existing code paths (number, code execution via executeScriptSync, and
validation via isValidDimensionResult) intact and ensure the new branch runs
prior to the final typeof value !== 'string' return.
---
Outside diff comments:
In `@shesha-reactjs/src/designer-components/radio/radio.tsx`:
- Around line 35-52: The onChangeInternal handler in the Factory component uses
a loose any type; import Ant Design's RadioChangeEvent from 'antd' and replace
the any with RadioChangeEvent for the onChangeInternal parameter, updating the
function signature in Factory (onChangeInternal) and adding the import at the
top of the file so the event is strongly typed when calling
customEvents.onChange and onChange.
---
Duplicate comments:
In
`@shesha-reactjs/src/designer-components/configurableItemAutocomplete/index.tsx`:
- Around line 33-35: The call to evaluateDynamicFilters currently uses an unsafe
cast (`as any`) for the filter payload; replace it with a properly typed object
(e.g., a Partial or narrowed type representing the filter expression) instead of
`any`. Create or import the exact filter-expression type used by
evaluateDynamicFilters (or declare a local interface like
DynamicFilterExpression), then construct the payload as that typed shape (or use
`unknown` and perform explicit runtime checks/conversion before passing) and
pass [{ expression: filter }] typed accordingly; reference
evaluateDynamicFilters and the local filter variable when updating the call
site.
In `@shesha-reactjs/src/designer-components/richTextEditor/index.tsx`:
- Line 72: The rerenderKey is incorrectly using model?.placeholder twice so it
doesn't change when autofocus toggles; update the key construction (the
rerenderKey variable) to use model?.autofocus (or its string/coerced value) for
the second segment instead of the duplicate model?.placeholder so the component
remounts when autofocus changes.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 5efd37c7-ea21-4074-8ed6-19c7d537601a
📒 Files selected for processing (8)
shesha-reactjs/src/components/mainLayout/styles/indexStyles.tsshesha-reactjs/src/designer-components/configurableItemAutocomplete/index.tsxshesha-reactjs/src/designer-components/image/image.tsxshesha-reactjs/src/designer-components/image/styles.tsshesha-reactjs/src/designer-components/multiColorInput/index.tsxshesha-reactjs/src/designer-components/radio/radio.tsxshesha-reactjs/src/designer-components/richTextEditor/index.tsxshesha-reactjs/src/utils/style.ts
shesha-reactjs/src/designer-components/configurableItemAutocomplete/index.tsx
Show resolved
Hide resolved
shesha-reactjs/src/designer-components/configurableItemAutocomplete/index.tsx
Show resolved
Hide resolved
…tyle utility - Added conditional height and width properties in RichTextEditorComponent based on model settings for better layout control. - Improved dimension parsing logic in style utility to handle IPropertySetting objects with a '_mode' of 'value', enhancing flexibility in dimension handling.
…idth refactor: enhance dimension handling in RichTextEditorComponent style utility
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
shesha-reactjs/src/designer-components/richTextEditor/index.tsx (1)
74-74:⚠️ Potential issue | 🟡 MinorUse the intended second rerender discriminator.
rerenderKeyconcatenatesmodel?.placeholdertwice, so the second segment never changes independently. That makes the key ineffective for the second remount condition and still looks like a copy/paste error.♻️ Proposed fix
- const rerenderKey = `${model?.placeholder || ''}-${model?.placeholder || false}`; + const rerenderKey = `${model?.placeholder || ''}-${model?.autofocus || false}`;🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@shesha-reactjs/src/designer-components/richTextEditor/index.tsx` at line 74, The rerenderKey currently duplicates model?.placeholder twice; change the second segment to the intended independent discriminator (use model?.readOnly here) so the key becomes `${model?.placeholder || ''}-${model?.readOnly || false}` (ensure the second segment is a boolean or stable string to force remount when readOnly changes).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@shesha-reactjs/src/utils/style.ts`:
- Around line 56-59: The `_mode === 'value'` branch currently calls
parseDimension(value._value, context) without validating that value._value is a
valid dimension result; mirror the `_mode === 'code'` flow by extracting and
validating the underlying value with isValidDimensionResult before passing it to
parseDimension. Concretely: in the same block that checks value?._mode ===
'value', assign const executedValue = value._value (or similar), run
isValidDimensionResult(executedValue) and only call
parseDimension(executedValue, context) when that guard passes; use the same
type-guard pattern used in the `_mode === 'code'` branch to preserve type safety
around IPropertySetting and avoid casting.
---
Duplicate comments:
In `@shesha-reactjs/src/designer-components/richTextEditor/index.tsx`:
- Line 74: The rerenderKey currently duplicates model?.placeholder twice; change
the second segment to the intended independent discriminator (use
model?.readOnly here) so the key becomes `${model?.placeholder ||
''}-${model?.readOnly || false}` (ensure the second segment is a boolean or
stable string to force remount when readOnly changes).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 2d451db7-8ff8-40d7-b97e-70434ababcdf
📒 Files selected for processing (2)
shesha-reactjs/src/designer-components/richTextEditor/index.tsxshesha-reactjs/src/utils/style.ts
- Added validation for _value in IPropertySetting to ensure it is a valid dimension type before parsing, improving error handling and robustness in dimension processing.
…idth refactor: validate dimension values in style utility
fix: update style for login and reset-password forms
- Deleted the AGENTS.md file, which contained the AI coding agent guide and project documentation for the Shesha ReactJS project. This change helps streamline the repository by removing outdated or unnecessary documentation.
…idth chore: remove AGENTS.md file from the repository
Katleho/fix/form configs
feat:new form configs
AlexStepantsov
approved these changes
Mar 10, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Shesha Width Properties Affecting the wrong width #3557
Summary by CodeRabbit
This PR resolves three critical rendering issues in the designer:
When a component's width was set to 50% in the designer, it would incorrectly render at 25% due to cascading style application. The wrapper element received a 50% width allocation, and the component itself also inherited 50% width from allStyles, resulting in a compounded calculation (50% × 50% = 25%).
Form items displayed incorrect total widths because label dimensions were not accounted for in the width calculations.
Viewport width (vw) units were not being converted to canvas-relative values within the designer environment. Consequently, components styled with 100vw would overflow beyond the canvas boundaries, as the calculation did not account for the screen space occupied by side panels.
New Features
Style
Bug Fixes