chore:n8nForm Node add css variable for media-size>500px #15771
Conversation
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
cubic reviewed 2 files and found no issues. Review PR in cubic.dev.
n8n-assistant
bot
added
community
|
Hey @depfryer, Thanks for the PR, We have created "GHC-2203" as the internal reference to get this reviewed. One of us will be in touch if there are any changes needed, in most cases this is normally within a couple of weeks but it depends on the current workload of the team. |
| @@ -32,6 +32,7 @@ | |||
|
|
|||
| /* Colors */ | |||
| --color-background: #fbfcfe; | |||
| --background-mobile-color: #ffffff; | |||
There was a problem hiding this comment.
It's better to stick with the other variable names and use something like --color-background-mobile
| @@ -17,10 +16,10 @@ export const cssVariables = ` | |||
| --font-size-html-h4: 14px; | |||
| --font-size-html-h5: 12px; | |||
| --font-size-html-h6: 10px; | |||
| --font-size-subheader: 14px; | |||
There was a problem hiding this comment.
Same here - not used in form-trigger.handlebars, but used in form-trigger-404.handlebars, form-trigger-409.handlebars and form-trigger-completion.handlebars
| --color-html-link: #ff6d5a; | ||
| --color-header-subtext: #7e8186; | ||
| --color-html-link: #FF6D5A; |
There was a problem hiding this comment.
--color-header-subtext - again, not used in form-trigger.handlebars, but used in form-trigger-404.handlebars, form-trigger-409.handlebars and form-trigger-completion.handlebars. Also, why would you update the hex to be capitalized?
| /* Border Radii */ | ||
| /* Border Radius */ |
| --border-radius-card: 8px; | ||
| --border-radius-input: 6px; | ||
| --border-radius-clear-btn: 50%; | ||
| --card-border-radius: 8px; |
There was a problem hiding this comment.
Same here - not used in form-trigger.handlebars, but used in form-trigger-404.handlebars, form-trigger-409.handlebars and form-trigger-completion.handlebars
| --card-padding: 24px; | ||
| --card-margin-bottom: 16px; |
| /* Border Radii */ | ||
| /* Border Radius */ |
There was a problem hiding this comment.
"Radii" is the plural of "Radius" - no need to change this comment
| --font-family: 'Open Sans', sans-serif; | ||
| --font-weight-normal: 400; | ||
| --font-weight-bold: 600; | ||
| /* Fonts */ | ||
| --font-family: "Open Sans", sans-serif; |
There was a problem hiding this comment.
Even though these variables are not used in form-trigger.handlebars, they are used in form-trigger-404.handlebars, form-trigger-409.handlebars and form-trigger-completion.handlebars. Do not remove those
Summary
add CSS variables that were blocking mobile customization. This fix allows proper styling and theming on mobile devices by removing some restrictive CSS constraints.
Review / Merge checklist
release/backport(if the PR is an urgent fix that needs to be backported)