refactor: migrate complex CSS calculations to clamp
#97
Conversation
✅ Deploy Preview for curate-v2 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
WalkthroughThis PR removes the runtime Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (5 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
web/src/components/ItemCard/index.tsx (1)
29-36: Inconsistent migration: mixing old and new approaches.The outer div still uses
cnandresponsiveSizefor inline styles (line 35), while the inner div (lines 38-41) usesclsxwith the new fluid classes. This creates an inconsistent styling approach within the same component.
♻️ Duplicate comments (2)
web/src/pages/SubmitItem/ItemField/FieldInput/TextInput.tsx (1)
4-4: Partial migration: responsiveSize still imported and used.The file migrates the width calculation to
lg:w-fluid-200-720but retainsresponsiveSizefor themarginBottominline style (line 12). This creates the same mixed approach seen in other files.web/src/pages/SubmitList/index.tsx (1)
35-43: Mixed migration approach: fluid classes and responsiveSize coexist.The container migrates
paddingBottomto the fluid classpb-fluid-76-96(line 38) but retainsresponsiveSizefor inlinepaddingInlineandpaddingTopstyles (lines 41-42). This creates the same partial migration pattern seen across multiple files.
🧹 Nitpick comments (2)
web/src/pages/SubmitItem/index.tsx (1)
39-47: Good migration step; consider finishing the move offresponsiveSizehere (paddingInline/paddingTop) for consistency.
Right now onlypaddingBottommoved topb-fluid-76-96, while inlineresponsiveSize(...)remains for the other paddings. If the intent is full “clamp utilities” adoption, it’d be cleaner to replace those too (and then drop theresponsiveSizeimport).web/src/pages/SubmitList/ItemParameters/Deposit.tsx (1)
8-10: PreferclassName={BASE_CONTAINER_STYLE}here (no need forcn()with a single static class).
This is equivalent and matches the other SubmitList pages that now useBASE_CONTAINER_STYLEdirectly.- <div className={cn(BASE_CONTAINER_STYLE)}> + <div className={BASE_CONTAINER_STYLE}>Also applies to: 18-20
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (32)
web/src/components/InformationCards/RegistryInformationCard/TopInfo.tsx(2 hunks)web/src/components/ItemCard/index.tsx(2 hunks)web/src/components/RegistryCard/RegistryInfo.tsx(1 hunks)web/src/components/StatDisplay.tsx(1 hunks)web/src/global.css(1 hunks)web/src/layout/Header/navbar/DappList.tsx(1 hunks)web/src/layout/Header/navbar/Menu/Settings/index.tsx(3 hunks)web/src/pages/AllLists/index.tsx(1 hunks)web/src/pages/AttachmentDisplay/index.tsx(1 hunks)web/src/pages/Home/Stats/index.tsx(1 hunks)web/src/pages/Home/index.tsx(1 hunks)web/src/pages/Settings/index.tsx(1 hunks)web/src/pages/SubmitItem/ItemField/FieldInput/AddressInput.tsx(1 hunks)web/src/pages/SubmitItem/ItemField/FieldInput/FileInput.tsx(2 hunks)web/src/pages/SubmitItem/ItemField/FieldInput/ImageInput.tsx(2 hunks)web/src/pages/SubmitItem/ItemField/FieldInput/LinkInput.tsx(1 hunks)web/src/pages/SubmitItem/ItemField/FieldInput/LongTextInput.tsx(1 hunks)web/src/pages/SubmitItem/ItemField/FieldInput/NumberInput.tsx(1 hunks)web/src/pages/SubmitItem/ItemField/FieldInput/TextInput.tsx(1 hunks)web/src/pages/SubmitItem/ItemField/FieldInput/constants.ts(0 hunks)web/src/pages/SubmitItem/Policy/Info.tsx(1 hunks)web/src/pages/SubmitItem/index.tsx(1 hunks)web/src/pages/SubmitList/DeployList/ListDetails.tsx(1 hunks)web/src/pages/SubmitList/ItemParameters/CustomName.tsx(1 hunks)web/src/pages/SubmitList/ItemParameters/Deposit.tsx(2 hunks)web/src/pages/SubmitList/ItemParameters/Fields/index.tsx(2 hunks)web/src/pages/SubmitList/ListParameters/Description.tsx(1 hunks)web/src/pages/SubmitList/ListParameters/LogoUpload.tsx(2 hunks)web/src/pages/SubmitList/ListParameters/Policy.tsx(2 hunks)web/src/pages/SubmitList/ListParameters/Title.tsx(2 hunks)web/src/pages/SubmitList/constants.ts(1 hunks)web/src/pages/SubmitList/index.tsx(2 hunks)
💤 Files with no reviewable changes (1)
- web/src/pages/SubmitItem/ItemField/FieldInput/constants.ts
🧰 Additional context used
🧠 Learnings (8)
📓 Common learnings
Learnt from: kyrers
Repo: kleros/curate-v2 PR: 89
File: web/src/styles/breakpoints.ts:1-1
Timestamp: 2025-11-14T22:12:39.974Z
Learning: In the kleros/curate-v2 repository, the kleros/ui-components-library overrides Tailwind's lg breakpoint to 900px (not the default 1024px). The LG_BREAKPOINT constant in web/src/styles/breakpoints.ts is set to 900 to match this override. This configuration is imported via the source directive in global.css.
📚 Learning: 2025-11-14T22:12:39.974Z
Learnt from: kyrers
Repo: kleros/curate-v2 PR: 89
File: web/src/styles/breakpoints.ts:1-1
Timestamp: 2025-11-14T22:12:39.974Z
Learning: In the kleros/curate-v2 repository, the kleros/ui-components-library overrides Tailwind's lg breakpoint to 900px (not the default 1024px). The LG_BREAKPOINT constant in web/src/styles/breakpoints.ts is set to 900 to match this override. This configuration is imported via the source directive in global.css.
Applied to files:
web/src/pages/AllLists/index.tsxweb/src/pages/SubmitList/constants.tsweb/src/components/ItemCard/index.tsxweb/src/layout/Header/navbar/DappList.tsxweb/src/global.css
📚 Learning: 2024-11-04T13:34:45.425Z
Learnt from: Harman-singh-waraich
Repo: kleros/curate-v2 PR: 65
File: web/src/utils/atlas/confirmEmail.ts:24-36
Timestamp: 2024-11-04T13:34:45.425Z
Learning: In the `confirmEmail` function in `web/src/utils/atlas/confirmEmail.ts`, input validation for the address is performed in the calling component, and additional checks are done in the API call itself. Input validation does not need to be repeated in this function.
Applied to files:
web/src/pages/SubmitItem/ItemField/FieldInput/AddressInput.tsx
📚 Learning: 2024-11-04T13:39:19.748Z
Learnt from: Harman-singh-waraich
Repo: kleros/curate-v2 PR: 65
File: web/src/utils/atlas/updateEmail.ts:21-38
Timestamp: 2024-11-04T13:39:19.748Z
Learning: For the `updateEmail` function in `web/src/utils/atlas/updateEmail.ts`, input validation and error handling are performed in the component that utilizes it. Therefore, additional checks within this utility function are unnecessary.
Applied to files:
web/src/pages/SubmitItem/ItemField/FieldInput/AddressInput.tsx
📚 Learning: 2024-11-04T13:33:39.755Z
Learnt from: Harman-singh-waraich
Repo: kleros/curate-v2 PR: 65
File: web/src/pages/Settings/index.tsx:18-26
Timestamp: 2024-11-04T13:33:39.755Z
Learning: In `web/src/pages/Settings/index.tsx`, the parent route handles the default `/settings` route, error boundaries, and loading states, so it's not necessary to include them in this component.
Applied to files:
web/src/pages/Settings/index.tsxweb/src/layout/Header/navbar/Menu/Settings/index.tsx
📚 Learning: 2024-11-04T13:31:54.080Z
Learnt from: Harman-singh-waraich
Repo: kleros/curate-v2 PR: 65
File: web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx:72-96
Timestamp: 2024-11-04T13:31:54.080Z
Learning: In the React TypeScript component `FormContactDetails` in `web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx`, error handling and user feedback are implemented within the `addUser` and `updateEmail` functions, which display toasts to the user.
Applied to files:
web/src/pages/Settings/index.tsxweb/src/pages/SubmitList/ListParameters/LogoUpload.tsxweb/src/layout/Header/navbar/Menu/Settings/index.tsx
📚 Learning: 2024-11-04T13:42:03.737Z
Learnt from: Harman-singh-waraich
Repo: kleros/curate-v2 PR: 65
File: web/src/components/ActionButton/Modal/EvidenceUpload.tsx:74-82
Timestamp: 2024-11-04T13:42:03.737Z
Learning: In `web/src/components/ActionButton/Modal/EvidenceUpload.tsx`, the `uploadFile` function already manages error handling and logging, so additional error handling after calling it is unnecessary.
Applied to files:
web/src/pages/SubmitItem/ItemField/FieldInput/FileInput.tsxweb/src/pages/SubmitList/ListParameters/LogoUpload.tsxweb/src/pages/SubmitItem/ItemField/FieldInput/ImageInput.tsx
📚 Learning: 2024-11-04T13:29:55.971Z
Learnt from: Harman-singh-waraich
Repo: kleros/curate-v2 PR: 65
File: web/src/context/AtlasProvider.tsx:176-193
Timestamp: 2024-11-04T13:29:55.971Z
Learning: In the `web/src/context/AtlasProvider.tsx` file of the React application, the `authoriseUser` function handles session invalidation and delegates error handling and user notifications to the functions that invoke it. Therefore, adding error notifications within `authoriseUser` is unnecessary.
Applied to files:
web/src/pages/SubmitList/ListParameters/LogoUpload.tsxweb/src/pages/SubmitList/ListParameters/Policy.tsx
🧬 Code graph analysis (6)
web/src/pages/SubmitList/ListParameters/Description.tsx (2)
web/src/context/SubmitListContext.tsx (1)
useSubmitListContext(123-123)web/src/pages/SubmitList/constants.ts (1)
BASE_CONTAINER_STYLE(1-1)
web/src/pages/SubmitList/ItemParameters/Fields/index.tsx (1)
web/src/pages/SubmitList/constants.ts (1)
BASE_CONTAINER_STYLE(1-1)
web/src/pages/SubmitList/ItemParameters/Deposit.tsx (2)
web/src/utils/index.ts (1)
cn(44-46)web/src/pages/SubmitList/constants.ts (1)
BASE_CONTAINER_STYLE(1-1)
web/src/pages/SubmitList/ListParameters/LogoUpload.tsx (1)
web/src/pages/SubmitList/constants.ts (1)
BASE_CONTAINER_STYLE(1-1)
web/src/pages/SubmitList/ItemParameters/CustomName.tsx (2)
web/src/context/SubmitListContext.tsx (1)
useSubmitListContext(123-123)web/src/pages/SubmitList/constants.ts (1)
BASE_CONTAINER_STYLE(1-1)
web/src/pages/SubmitList/ListParameters/Policy.tsx (1)
web/src/pages/SubmitList/constants.ts (1)
BASE_CONTAINER_STYLE(1-1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Redirect rules - curate-v2
- GitHub Check: Header rules - curate-v2
- GitHub Check: Pages changed - curate-v2
🔇 Additional comments (31)
web/src/pages/Home/Stats/index.tsx (1)
71-76: Thepb-4!andlg:pb-0!syntax is correct for Tailwind CSS v4 (currently at ^4.1.16 in this project). In Tailwind v4, the important modifier uses a trailing!after the utility class, unlike v3 which used a leading!prefix. No changes needed.Likely an incorrect or invalid review comment.
web/src/pages/Settings/index.tsx (1)
4-12: LGTM; just double-check the combinedpx-4+lg:px-fluid-0-32doesn’t regress the desktop spacing you expect.web/src/pages/AttachmentDisplay/index.tsx (1)
9-22: All three padding utilities are properly defined in the project. The--spacing-fluid-24-136,--spacing-fluid-32-80, and--spacing-fluid-76-96CSS variables are defined inweb/src/global.cssas responsive fluid spacing utilities usingclamp(), and can be used as Tailwind classes as shown in the code.web/src/pages/SubmitItem/Policy/Info.tsx (1)
11-11: Thew-fluid-342-618width utility is correctly defined and ensures smooth responsive scaling. The AlertMessage will fluidly transition from84vwon mobile to a maximum of618pxwithout jarring jumps at the 900pxlgboundary.web/src/pages/SubmitList/DeployList/ListDetails.tsx (1)
14-19: Nice simplification;p-fluid-24-32exists and applies as expected (scales 24–32px from 375–1250px viewport width).web/src/components/StatDisplay.tsx (1)
15-15: No issues found. Thelg:mb-fluid-16-30utility class is properly defined via the Tailwind v4 configuration and will apply the intended responsive bottom margin spacing on desktop viewports.web/src/pages/SubmitList/constants.ts (1)
1-1: LGTM!The addition of
lg:w-fluid-442-700-900successfully replaces the complex landscape width calculation with a CSS clamp-based token, aligning perfectly with the PR objective.web/src/pages/SubmitList/ItemParameters/Fields/index.tsx (1)
9-9: LGTM!Successfully migrated from
cncomposition with landscape width calculations to direct usage ofBASE_CONTAINER_STYLE. This simplifies the className logic and aligns with the migration to fluid spacing tokens.Also applies to: 43-43
web/src/pages/SubmitList/ListParameters/Description.tsx (1)
6-6: LGTM!Clean migration from
cn-based composition to direct usage ofBASE_CONTAINER_STYLE, consistent with the broader refactoring effort.Also applies to: 14-14
web/src/pages/SubmitList/ListParameters/Policy.tsx (1)
12-12: LGTM!Consistent migration from
cncomposition to directBASE_CONTAINER_STYLEusage, aligning with the refactoring pattern across all SubmitList components.Also applies to: 37-37
web/src/pages/SubmitList/ListParameters/LogoUpload.tsx (1)
11-11: LGTM!Successfully migrated to direct
BASE_CONTAINER_STYLEusage, maintaining consistency with the other SubmitList components.Also applies to: 54-54
web/src/pages/SubmitItem/ItemField/FieldInput/FileInput.tsx (1)
8-8: LGTM!Excellent migration from
cntoclsxwith proper usage of fluid spacing tokens (w-fluid-200-720,mb-fluid-150-72). The className composition is cleaner and leverages the new CSS clamp-based utilities as intended.Note: The
mb-fluid-150-72token uses reverse scaling (150px at mobile → 72px at desktop), which is intentional for this use case.Also applies to: 30-36
web/src/global.css (1)
27-60: The Tailwind configuration is already correctly set up for Tailwind v4. The@sourcedirective in global.css (line 3) properly enables Tailwind to scan the kleros/ui-components-library, and the custom CSS variables defined in the@themeblock are being used correctly throughout the codebase via arbitrary values (e.g.,lg:p-[48px_var(--spacing-fluid-0-32)_60px]). No additional mapping or configuration is needed.web/src/pages/SubmitItem/ItemField/FieldInput/AddressInput.tsx (1)
24-28: Ensurelg:w-fluid-200-720is defined + consider migratingmarginBottomtoo.
The static width class is cleaner, but it depends on thew-fluid-200-720token being present in Tailwind/global CSS. Also notestyle={{ marginBottom: responsiveSize(...) }}is still a runtime calc path if the goal is “all clamp”.web/src/pages/SubmitItem/ItemField/FieldInput/LongTextInput.tsx (1)
8-12: Verify the new utility classes exist (lg:w-fluid-200-720,custom-scrollbar).
Change looks fine, but make sure the new width token and scrollbar class are defined and survive Tailwind’s content scanning.web/src/components/RegistryCard/RegistryInfo.tsx (1)
21-23: Confirm the CSS vars exist and the lg grid template renders correctly at the 900px breakpoint.
Nice direction (tokenized, no complex calc), but the class depends on--spacing-fluid-80-100-900/--spacing-fluid-100-150-900being defined and the arbitrarygrid-cols-[...]being picked up by Tailwind. (Also: using900matches the repo’slg=900pxoverride.)web/src/pages/SubmitList/ListParameters/Title.tsx (1)
6-7: LGTM: container now usesBASE_CONTAINER_STYLEdirectly.
Clean simplification and consistent with the removal of landscape calc constants.Also applies to: 15-16
web/src/pages/SubmitList/ItemParameters/CustomName.tsx (1)
5-6: LGTM:BASE_CONTAINER_STYLEapplied directly.
Simplifies layout styling and removes dependence on landscape calc constants.Also applies to: 11-12
web/src/pages/SubmitItem/ItemField/FieldInput/LinkInput.tsx (1)
23-28: Verifylg:w-fluid-200-720matches the old width behavior.
Change is fine structurally; just make sure the new token exists and doesn’t regress field widths on>= lg.web/src/pages/SubmitItem/ItemField/FieldInput/NumberInput.tsx (1)
11-16: Verifylg:w-fluid-200-720is defined and applied forNumberFieldtoo.
Assuming the token exists, this is a straightforward and consistent cleanup.web/src/components/InformationCards/RegistryInformationCard/TopInfo.tsx (2)
63-66: LGTM! Clean migration to clsx and fluid spacing.The className composition correctly migrates from
cntoclsxand introduces the new responsive gap utilities that align with the CSS clamp approach.
7-13: Mixed migration approach is intentional, but should be completed in this file.The file uses both
responsiveSize(lines 38, 40) and new fluid spacing classes (line 65), which is consistent with an ongoing codebase-wide migration from inline responsive calculations to CSS-based fluid spacing variables. While this partial migration appears intentional across the codebase (86 existing usages ofresponsiveSizeremain), completing the conversion in this file would improve consistency. Replace the inlineresponsiveSizecalls on lines 38 and 40 with corresponding fluid spacing classes to align with the new pattern established on line 65.web/src/pages/SubmitItem/ItemField/FieldInput/TextInput.tsx (1)
11-11: Clean migration to fluid width class.The responsive width correctly uses the new
lg:w-fluid-200-720class, which should use CSS clamp under the hood.web/src/components/ItemCard/index.tsx (1)
12-12: Well-structured CSS variable and fluid spacing usage.The grid column definition using
var(--spacing-fluid-150-180-900)and the gap classlg:gap-fluid-16-36-900correctly leverage the new clamp-based utilities.Also applies to: 38-41
web/src/pages/SubmitItem/ItemField/FieldInput/ImageInput.tsx (3)
6-8: Clean import migration.Correctly removes
cnand addsclsxfor the new className composition approach.
31-34: Excellent: Complete migration to fluid utilities.This component fully migrates to the new approach with:
- Fluid width classes:
w-[84vw] lg:w-fluid-200-720- Fluid margin:
mb-fluid-150-72- Custom text formatting classes
No leftover
responsiveSizeinline styles, making this a model for the complete migration.
37-37: Verify message prop concatenation behavior.The
messageprop now concatenatesfieldProp.descriptionwith the file uploader message using\n. Ensure this displays correctly in both mobile and desktop views, especially with the[&_small]:whitespace-pre-lineclass applied.web/src/layout/Header/navbar/Menu/Settings/index.tsx (2)
8-8: Clean addition of clsx.Correctly introduces
clsxfor className composition.
37-42: Consistent migration to clsx with distinct responsive sizing strategies.The component correctly uses
clsxfor both the container and Tabs. The code at lines 37-42 employs standard Tailwind utilities, while line 46 usesscaleutilities (w-scale-300-424-300,px-scale-8-32-300). This represents a deliberate choice:scaleutilities apply linear scaling viacalc(), whilefluidutilities (used elsewhere in the codebase) applyclamp()with hard min/max boundaries for more constrained responsive behavior.web/src/pages/SubmitList/index.tsx (2)
19-19: Clean clsx import.Correctly introduces
clsxfor the new className composition.
35-39: Good use of clsx and fluid utilities.The component correctly migrates to
clsxand introduces fluid spacing classes (pb-fluid-76-96,lg:px-fluid-25-65).Also applies to: 47-47
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (5)
web/src/pages/SubmitItem/Header/index.tsx (2)
20-21: GuardidfromuseParamsbefore destructuring to avoid potential runtime error
id?.split("-")can evaluate toundefined, and destructuring[listAddress, _]from that will throw if this component ever renders without anidparam. Safer to guardidexplicitly and only split once it’s known to be a string.For example:
- const { id } = useParams(); - const [listAddress, _]: string[] = id?.split("-"); + const { id } = useParams(); + if (!id) { + throw new Error("Missing list address route param"); + } + const [listAddress] = id.split("-");This keeps the runtime behavior predictable and makes it obvious that
Headerrequires the route param to be present.
44-48: Card layout refactor looks good; consider reusing shared container stylesThe new class composition keeps the previous flex layout while moving spacing into utilities (
py-6 px-fluid-24-32,mb-9,w-[80vw] lg:w-[91vw]), which aligns with the PR goal of replacing inline calc-based styles.If other pages now use a shared container style (e.g., a
BASE_CONTAINER_STYLEor similar), it might be worth reusing that here so width/margins are controlled from a single place and easier to tweak globally, especially around thelgbreakpoint (900px in this codebase). Based on learnings, this would help keep behavior consistent across layouts.web/src/pages/SubmitList/ItemParameters/ItemPreview/ItemDisplay.tsx (1)
6-8: Consider removing the empty interface.The
IItemDisplayinterface is empty and the component destructures empty props. This can be simplified.-interface IItemDisplay {} - -const ItemDisplay: React.FC<IItemDisplay> = ({}) => { +const ItemDisplay: React.FC = () => {web/src/components/InformationCards/RegistryInformationCard/index.tsx (1)
10-10: Consider completing the migration fromcntoclsx.The PR description states that
cnutility has been replaced withclsxacross components (as seen inItemCard/index.tsx). However, this file still imports and usescn(lines 10, 50, 53). For consistency, consider completing the migration here as well.Apply this diff to migrate to
clsx:-import { cn } from "src/utils"; +import clsx from "clsx";Then replace the
cncalls withclsx:- <Card className={cn("flex flex-col w-full h-auto mb-16", className)}> + <Card className={clsx("flex flex-col w-full h-auto mb-16", className)}><p - className={cn( + className={clsx( "w-full py-2 px-8 bg-klerosUIComponentsWarningLight", "text-sm font-medium text-center text-klerosUIComponentsWarning" )}web/src/global.css (1)
65-65: Consider clarifying naming for reverse-scaling variables.Variables like
--spacing-fluid-32-24,--spacing-fluid-68-40, and--spacing-fluid-150-72shrink as the viewport increases (reverse behavior compared to most other fluid variables). While the implementation is mathematically correct, this reverse pattern could be confusing during maintenance since most other variables follow a "smaller-to-larger" growth pattern.Consider adding a comment or adopting a naming convention (e.g., suffix like
-reverseor-shrink) to make this behavior explicit.Also applies to: 68-68, 74-74
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (37)
web/src/components/InfoCard.tsx(2 hunks)web/src/components/InformationCards/ItemInformationCard/index.tsx(1 hunks)web/src/components/InformationCards/RegistryInformationCard/Policies.tsx(1 hunks)web/src/components/InformationCards/RegistryInformationCard/TopInfo.tsx(3 hunks)web/src/components/InformationCards/RegistryInformationCard/index.tsx(1 hunks)web/src/components/ItemCard/index.tsx(2 hunks)web/src/components/RegistryCard/RegistryInfo.tsx(2 hunks)web/src/components/StyledSkeleton.tsx(1 hunks)web/src/global.css(1 hunks)web/src/layout/Header/DesktopHeader.tsx(1 hunks)web/src/layout/Header/navbar/DappList.tsx(1 hunks)web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx(1 hunks)web/src/layout/Header/navbar/Product.tsx(1 hunks)web/src/pages/AttachmentDisplay/Header.tsx(1 hunks)web/src/pages/Home/Header.tsx(1 hunks)web/src/pages/Home/index.tsx(1 hunks)web/src/pages/SubmitItem/Header/index.tsx(1 hunks)web/src/pages/SubmitItem/ItemField/FieldInput/AddressInput.tsx(1 hunks)web/src/pages/SubmitItem/ItemField/FieldInput/LinkInput.tsx(1 hunks)web/src/pages/SubmitItem/ItemField/FieldInput/LongTextInput.tsx(1 hunks)web/src/pages/SubmitItem/ItemField/FieldInput/NumberInput.tsx(1 hunks)web/src/pages/SubmitItem/ItemField/FieldInput/TextInput.tsx(1 hunks)web/src/pages/SubmitItem/NavigationButtons/index.tsx(1 hunks)web/src/pages/SubmitItem/Preview/ItemDisplay.tsx(1 hunks)web/src/pages/SubmitItem/Preview/ListDisplay.tsx(1 hunks)web/src/pages/SubmitItem/Preview/index.tsx(1 hunks)web/src/pages/SubmitItem/index.tsx(1 hunks)web/src/pages/SubmitList/AdvancedParameters/index.tsx(1 hunks)web/src/pages/SubmitList/DeployList/index.tsx(1 hunks)web/src/pages/SubmitList/ItemParameters/ItemPreview/ItemDisplay.tsx(1 hunks)web/src/pages/SubmitList/ItemParameters/ItemPreview/ListDisplay.tsx(1 hunks)web/src/pages/SubmitList/ItemParameters/ItemPreview/index.tsx(1 hunks)web/src/pages/SubmitList/ListParameters/ListPreview/HomePageDisplay.tsx(1 hunks)web/src/pages/SubmitList/ListParameters/ListPreview/ListPageDisplay.tsx(1 hunks)web/src/pages/SubmitList/ListParameters/ListPreview/index.tsx(1 hunks)web/src/pages/SubmitList/index.tsx(2 hunks)web/src/styles/responsiveSize.ts(0 hunks)
💤 Files with no reviewable changes (1)
- web/src/styles/responsiveSize.ts
🚧 Files skipped from review as they are similar to previous changes (10)
- web/src/pages/SubmitItem/ItemField/FieldInput/AddressInput.tsx
- web/src/pages/Home/index.tsx
- web/src/pages/SubmitList/index.tsx
- web/src/layout/Header/navbar/DappList.tsx
- web/src/components/RegistryCard/RegistryInfo.tsx
- web/src/pages/SubmitItem/ItemField/FieldInput/LongTextInput.tsx
- web/src/pages/SubmitItem/ItemField/FieldInput/NumberInput.tsx
- web/src/pages/SubmitItem/index.tsx
- web/src/pages/SubmitItem/ItemField/FieldInput/TextInput.tsx
- web/src/pages/SubmitItem/ItemField/FieldInput/LinkInput.tsx
🧰 Additional context used
🧠 Learnings (7)
📓 Common learnings
Learnt from: kyrers
Repo: kleros/curate-v2 PR: 89
File: web/src/styles/breakpoints.ts:1-1
Timestamp: 2025-11-14T22:12:39.974Z
Learning: In the kleros/curate-v2 repository, the kleros/ui-components-library overrides Tailwind's lg breakpoint to 900px (not the default 1024px). The LG_BREAKPOINT constant in web/src/styles/breakpoints.ts is set to 900 to match this override. This configuration is imported via the source directive in global.css.
📚 Learning: 2024-11-04T13:31:54.080Z
Learnt from: Harman-singh-waraich
Repo: kleros/curate-v2 PR: 65
File: web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx:72-96
Timestamp: 2024-11-04T13:31:54.080Z
Learning: In the React TypeScript component `FormContactDetails` in `web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx`, error handling and user feedback are implemented within the `addUser` and `updateEmail` functions, which display toasts to the user.
Applied to files:
web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx
📚 Learning: 2024-11-04T13:41:31.226Z
Learnt from: Harman-singh-waraich
Repo: kleros/curate-v2 PR: 65
File: web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx:126-126
Timestamp: 2024-11-04T13:41:31.226Z
Learning: In `web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx`, the `isUndefined` function effectively handles `null` or `undefined` values. Therefore, using the non-null assertion `!` on `user?.emailUpdateableAt` when calling `timeLeftUntil(user?.emailUpdateableAt!)` is acceptable, as potential `null` or `undefined` cases are already managed.
Applied to files:
web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx
📚 Learning: 2024-11-04T13:33:39.755Z
Learnt from: Harman-singh-waraich
Repo: kleros/curate-v2 PR: 65
File: web/src/pages/Settings/index.tsx:18-26
Timestamp: 2024-11-04T13:33:39.755Z
Learning: In `web/src/pages/Settings/index.tsx`, the parent route handles the default `/settings` route, error boundaries, and loading states, so it's not necessary to include them in this component.
Applied to files:
web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx
📚 Learning: 2024-11-04T13:34:45.425Z
Learnt from: Harman-singh-waraich
Repo: kleros/curate-v2 PR: 65
File: web/src/utils/atlas/confirmEmail.ts:24-36
Timestamp: 2024-11-04T13:34:45.425Z
Learning: In the `confirmEmail` function in `web/src/utils/atlas/confirmEmail.ts`, input validation for the address is performed in the calling component, and additional checks are done in the API call itself. Input validation does not need to be repeated in this function.
Applied to files:
web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx
📚 Learning: 2024-11-04T13:39:19.748Z
Learnt from: Harman-singh-waraich
Repo: kleros/curate-v2 PR: 65
File: web/src/utils/atlas/updateEmail.ts:21-38
Timestamp: 2024-11-04T13:39:19.748Z
Learning: For the `updateEmail` function in `web/src/utils/atlas/updateEmail.ts`, input validation and error handling are performed in the component that utilizes it. Therefore, additional checks within this utility function are unnecessary.
Applied to files:
web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx
📚 Learning: 2025-11-14T22:12:39.974Z
Learnt from: kyrers
Repo: kleros/curate-v2 PR: 89
File: web/src/styles/breakpoints.ts:1-1
Timestamp: 2025-11-14T22:12:39.974Z
Learning: In the kleros/curate-v2 repository, the kleros/ui-components-library overrides Tailwind's lg breakpoint to 900px (not the default 1024px). The LG_BREAKPOINT constant in web/src/styles/breakpoints.ts is set to 900 to match this override. This configuration is imported via the source directive in global.css.
Applied to files:
web/src/global.css
🔇 Additional comments (25)
web/src/pages/SubmitList/ItemParameters/ItemPreview/ListDisplay.tsx (1)
13-16: Gap utility migration looks good; confirm token exists and matches intended spacingSwitching from an inline responsiveSize gap to
gap-fluid-32-24on the flex column container aligns with the PR’s CSS refactor goals and should improve consistency and readability.Please just confirm that:
gap-fluid-32-24is defined inglobal.css(or the imported utilities), and- Its clamp values are intended to mirror the prior 32/24 spacing behavior for this layout.
web/src/components/InformationCards/RegistryInformationCard/TopInfo.tsx (4)
7-7: LGTM! Clean migration to standard library.The migration from the custom
cnutility toclsxand removal ofresponsiveSizealigns well with the PR objectives to simplify CSS calculations and use standard libraries.Also applies to: 12-12
36-36: LGTM! Consistent fluid gap usage.The
gap-y-fluid-8-16utility provides clean, responsive vertical spacing.
59-62: Clean migration toclsx.The migration from
cntoclsxis correct. Thelg:gap-x-fluid-24-32-900utility follows an intentional naming convention:fluid-[min]-[max]-[breakpoint], where 24px and 32px are the min/max values and 900 refers to the LG_BREAKPOINT. This pattern is consistently used throughout the codebase and properly defined in global.css.
35-35: Good refactor to declarative fluid utilities.The migration to
pt-fluid-20-24andpx-fluid-24-32fluid utility classes simplifies the responsive styling approach. These utilities are properly defined in the Tailwind theme configuration via CSS custom properties in global.css and are correctly applied.web/src/components/StyledSkeleton.tsx (2)
13-13: SkeletonRegistryCard simplification aligns with clamp utilitiesInlining the card skeleton and driving both width/height through
w-full h-fluid-270-296looks good and matches the clamp/fluid utility direction. No issues from my side here.
17-19: Verifyw-fluid-*widths effectively override Skeleton’s default widthSwitching from explicit
widthprops toclassName="ml-auto w-fluid-100-160"/"w-fluid-60-80"is a nice move toward CSS-driven sizing. However,react-loading-skeletondefaults the skeleton width to100%, so the final width will depend on CSS cascade between.react-loading-skeletonand yourw-fluid-*utilities.(github.com)Please confirm in the browser (or via devtools) that:
- The first skeleton in
SkeletonJustificationCardactually renders with the intended clamped width while still right‑aligned viaml-auto.- The third skeleton’s width matches the new
w-fluid-60-80design across breakpoints.If the default
width: 100%from the library wins in your build, you may need to either adjust CSS load order or fall back to thewidthprop for these two cases.web/src/components/InformationCards/ItemInformationCard/index.tsx (1)
63-63: Clean migration to fluid spacing utility.The replacement of inline
responsiveSizestyling with themy-fluid-20-28utility class improves readability and aligns with the PR's objective to simplify responsive sizing. The semantic class name clearly conveys the vertical margin range.web/src/pages/SubmitItem/Preview/index.tsx (1)
10-17: Well-structured migration to fluid utilities withclsx.The file successfully migrates from
responsiveSizeinline styles to CSS fluid utility classes and adoptsclsxfor className composition. The fluid classes (px-fluid-10-130,mb-fluid-0-16,py-fluid-24-48,px-fluid-24-32) clearly express the responsive behavior.web/src/pages/SubmitItem/NavigationButtons/index.tsx (1)
13-13: Migration to fluid spacing utility approved.The
mt-fluid-32-24class replaces the previousresponsiveSize(32, 24)call, maintaining the same responsive behavior (32px on smaller viewports scaling down to 24px on larger viewports).web/src/pages/SubmitList/ItemParameters/ItemPreview/ItemDisplay.tsx (1)
12-12: Clean migration to gap utility class.The replacement of
style={{ gap: responsiveSize(32, 24) }}with thegap-fluid-32-24utility class improves maintainability and aligns with the PR's migration strategy.web/src/pages/Home/Header.tsx (1)
17-17: No changes needed.The
text-(length:--spacing-fluid-20-24)syntax is correct. The CSS custom property--spacing-fluid-20-24is defined inglobal.css(line 57), Tailwind v4 is being used (@tailwindcss/vite@^4.1.16), and the@sourcedirective for scanning external library variables is properly configured (line 3).web/src/pages/SubmitItem/Preview/ItemDisplay.tsx (1)
21-21: Clean migration to fluid utility class.The replacement of
responsiveSizewithgap-fluid-32-24simplifies the code and aligns with the PR's objective of using CSS clamp-based utilities for responsive sizing.web/src/pages/SubmitList/AdvancedParameters/index.tsx (1)
28-28: LGTM!The migration from
responsiveSizetopx-fluid-0-108for horizontal padding follows the PR's pattern of replacing runtime calculations with CSS utility classes.web/src/pages/SubmitList/ListParameters/ListPreview/index.tsx (1)
11-16: LGTM!Good use of multiple fluid utility classes (
mb-fluid-0-16,py-fluid-24-48,px-fluid-24-32) to replace the previous inline styles. Theclsxcomposition keeps the className readable with logical grouping.web/src/pages/SubmitItem/Preview/ListDisplay.tsx (1)
21-21: LGTM!Consistent use of
gap-fluid-32-24matching the pattern inItemDisplay.tsx. The migration maintains visual consistency between the preview components.web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx (1)
73-73: The utility class naming convention is consistent and properly documented. Thepx-fluid-12-32-300pattern is defined in global.css (line 51) and follows the established convention:spacing-fluid-MIN-MAX-[BREAKPOINT]. The third value (300) specifies a custom viewport breakpoint; without it, utilities default to 375px. The codebase uses both 2-value patterns (default breakpoint) and 3-value patterns (custom breakpoints like 300px and 900px) throughout, making this a standard, documented approach rather than an anomaly.Likely an incorrect or invalid review comment.
web/src/pages/SubmitList/ListParameters/ListPreview/ListPageDisplay.tsx (1)
14-14: Fluid gap utility migration looks goodSwitching from inline
responsiveSizetogap-fluid-32-24keeps the layout intent while centralizing the responsive behavior in CSS tokens; no functional impact on the preview logic.web/src/pages/SubmitList/DeployList/index.tsx (1)
14-14: Replacing inline padding withpx-fluid-0-108is consistent and clearerThe container still spans full width and centers content, but now relies on a shared fluid padding token instead of inline
responsiveSize, which improves maintainability and consistency with the rest of the refactor.web/src/layout/Header/DesktopHeader.tsx (1)
45-45: Fluid gap for wallet/menu cluster is appropriateUsing
gap-fluid-4-8here keeps the horizontal rhythm betweenConnectWalletandMenuresponsive while preserving the existing layout (ml-2 and canvas sizing). This should play nicely with your customlgbreakpoint at 900px since spacing is now driven by shared tokens rather than ad‑hoc values. Based on learnings, ...web/src/components/InformationCards/RegistryInformationCard/Policies.tsx (1)
27-27: Policies card spacing refactor keeps behavior while unifying stylingSwapping inline padding/gap for
px-fluid-24-32andgap-fluid-16-24aligns this card with the new spacing system; the links/skeletons layout remains the same while centralizing the responsive behavior in CSS utilities.Also applies to: 33-33
web/src/pages/SubmitList/ListParameters/ListPreview/HomePageDisplay.tsx (1)
12-12: Tokenizing preview vertical spacing is a clean swap
gap-fluid-32-24maintains the intended separation between the helper text and theRegistryCardwhile moving the responsiveness into shared CSS utilities, consistent with the rest of the PR.web/src/pages/SubmitList/ItemParameters/ItemPreview/index.tsx (1)
10-10: Item preview card spacing migration is consistent and preserves layoutThe switch to
px-fluid-10-130on the container andmb-fluid-0-16 py-fluid-24-48 px-fluid-24-32on theCardcleanly replaces per‑component responsiveSize calls. Border/background semantics are unchanged, so the only impact is centralized, token‑driven spacing.Also applies to: 15-17
web/src/components/InfoCard.tsx (1)
1-1: InfoCard migration toclsxand fluid gap utility looks solidImporting
clsxand usinggap-fluid-6-8-300removes the last bit of responsiveSize/cn usage from this component while keeping the grid layout and externalclassNameoverride behavior the same.Also applies to: 13-17
web/src/components/ItemCard/index.tsx (1)
29-29: No action needed. The custom utilities are properly configured through Tailwind v4's automatic utility generation. The@sourcedirective in global.css (line 3) tells Tailwind to scan the@kleros/ui-components-libraryand generate utilities from the CSS variables defined in the@themeblock. The--spacing-fluid-12-32-900variable is defined (line 56 in global.css) and is automatically converted to thegap-x-fluid-12-32-900utility by Tailwind v4's built-in mechanism.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
web/src/global.css (1)
36-81: Clamp formulas and breakpoint choices look consistent.The
--spacing-fluid-*tokens all useclamp(min, calc(...), max)with min/max values that match the token names (including the decreasing ranges like32-24,68-40, and150-72), and the variants with-900correctly pivot around 900px, which matches the overriddenlgbreakpoint in this repo. Based on this file alone, the formulas and naming are internally consistent and aligned with the breakpoint configuration.Based on learnings, ...
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
web/src/global.css(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: kyrers
Repo: kleros/curate-v2 PR: 89
File: web/src/styles/breakpoints.ts:1-1
Timestamp: 2025-11-14T22:12:39.974Z
Learning: In the kleros/curate-v2 repository, the kleros/ui-components-library overrides Tailwind's lg breakpoint to 900px (not the default 1024px). The LG_BREAKPOINT constant in web/src/styles/breakpoints.ts is set to 900 to match this override. This configuration is imported via the source directive in global.css.
📚 Learning: 2025-11-14T22:12:39.974Z
Learnt from: kyrers
Repo: kleros/curate-v2 PR: 89
File: web/src/styles/breakpoints.ts:1-1
Timestamp: 2025-11-14T22:12:39.974Z
Learning: In the kleros/curate-v2 repository, the kleros/ui-components-library overrides Tailwind's lg breakpoint to 900px (not the default 1024px). The LG_BREAKPOINT constant in web/src/styles/breakpoints.ts is set to 900 to match this override. This configuration is imported via the source directive in global.css.
Applied to files:
web/src/global.css
Resolves #96.
PR-Codex overview
This PR focuses on refactoring CSS styles in various components, replacing
responsiveSizecalculations with new fluid spacing utilities. It also removes unused imports and constants to streamline the code.Detailed summary
responsiveSizeusage in multiple components.clsxfor conditional class management.Summary by CodeRabbit
Refactor
Style
New Features
✏️ Tip: You can customize this high-level summary in your review settings.