Conversation
* fix: merge conflicts * fix: remove consoles
* fix: stabilize dropdown and news text styling Prevent global button/text styles from breaking Contact enquiry dropdown visuals and News article link readability, while aligning news sub-body text to the left for consistent content presentation across states. Made-with: Cursor * feat: enhance styling for news articles and select field components
* fix: metamask traction error messages * fix: test cases * fix: update links and improve code formatting ---------
📝 WalkthroughWalkthroughThis PR introduces error message propagation throughout the asset management flow by threading an Changes
Sequence DiagramsequenceDiagram
participant User as User
participant AssetApp as AssetManagementApplication
participant AssetForm as AssetManagementForm
participant ActionForm as ActionForm
participant ContractHook as useContractFunctionHook
participant TokenCtx as TokenInformationContext
participant Overlay as DocumentTransferMessage Overlay
User->>AssetForm: Initiates action
AssetForm->>ActionForm: Renders with error prop
ActionForm->>ContractHook: Calls contract method
ContractHook-->>ContractHook: Error occurs (maps code to errorMessage)
ContractHook-->>TokenCtx: Propagates errorMessage
AssetApp->>TokenCtx: Reads errorMessage
AssetApp->>AssetForm: Passes errorMessage prop
AssetForm->>ActionForm: Forwards errorMessage
ActionForm->>Overlay: Shows overlay with errorMessage
Overlay-->>User: Displays error in DocumentTransferMessage
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Review rate limit: 0/1 reviews remaining, refill in 60 minutes.Comment |
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (4)
src/pages/Home/index.tsx (1)
13-13: Use responsive padding instead of fixedp-[80px]across all viewports.Line 13 applies 80px padding on small screens too, which can make mobile sections feel cramped. Prefer breakpoint-based spacing.
Proposed Tailwind adjustment
- <div className="flex flex-col items-center p-[80px] max-w-[1440px] mx-auto"> + <div className="flex flex-col items-center px-4 py-12 sm:px-6 sm:py-16 lg:px-12 lg:py-20 max-w-[1440px] mx-auto">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/Home/index.tsx` at line 13, Replace the fixed p-[80px] on the main container div in the Home component (the <div className="flex flex-col items-center p-[80px] max-w-[1440px] mx-auto">) with responsive Tailwind spacing utilities so small viewports get reduced padding and larger viewports keep larger gaps; for example use breakpointed classes (sm:*, md:*, lg:*) such as smaller x/y padding on mobile and larger on md/lg to maintain layout (e.g., sm:px-4 sm:py-8 md:px-8 md:py-16 lg:py-20), ensuring you update the className string on that div accordingly.src/components/common/contexts/providerContext.tsx (1)
39-39: Prefer a single RPC resolver path increateProvider.
getRpcUrlalready encapsulates fallback/validation. The extraChainInfo[chainId]?.rpcUrlfallback reintroduces parallel behavior and weakens that central guard.Suggested fix
- const url = getRpcUrl(String(chainId)) ?? ChainInfo[chainId]?.rpcUrl + const url = getRpcUrl(String(chainId))🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/common/contexts/providerContext.tsx` at line 39, The code creates a URL with two resolution paths which duplicates logic; in createProvider replace the dual lookup with a single call to getRpcUrl and use its result directly (remove the fallback to ChainInfo[chainId]?.rpcUrl), i.e., change the url assignment so it only assigns getRpcUrl(String(chainId)); update any downstream assumptions if null/undefined can be returned by getRpcUrl; ensure references to getRpcUrl and the url variable in createProvider remain consistent.src/components/common/contexts/TokenInformationContext/TokenInformationContext.tsx (1)
415-425: Consider documenting the error aggregation behavior.The
||chain returns the first truthy error message. This works well for the current UI flow where only one operation is active at a time. However, if multiple operations could fail simultaneously (e.g., from concurrent async calls), only the first error would be surfaced.This is acceptable for the current design, but a brief comment explaining this behavior would help future maintainers understand the intentional precedence.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/common/contexts/TokenInformationContext/TokenInformationContext.tsx` around lines 415 - 425, Add a short comment above the errorMessage aggregation explaining that the || chain intentionally returns the first truthy error and therefore establishes a precedence among changeHolderErrorMessage, destroyTokenErrorMessage, endorseBeneficiaryErrorMessage, transferOwnersErrorMessage, nominateErrorMessage, rejectTransferOwnerErrorMessage, rejectTransferHolderErrorMessage, rejectTransferOwnerHolderErrorMessage, restoreTokenErrorMessage, and returnToIssuerErrorMessage; mention this is acceptable because only one operation is expected to be active at a time and note that if concurrent failures become possible, the aggregation should be revisited to surface multiple errors or combine messages.src/hooks/useContractFunctionHook.test.tsx (1)
65-167: Consider table-driven tests to reduce repetition in mapping coverage.The assertions are solid, but this block can be simplified with
it.eachfor easier maintenance and faster additions.Refactor sketch
+it.each([ + [{ code: 4001 }, 'User Rejected Transaction'], + [{ code: 4100 }, 'Unauthorized: Account or method not authorized'], + [{ code: -32603 }, 'Internal Error'], + [{ code: 'INSUFFICIENT_FUNDS' }, 'Insufficient Funds'], +])('maps %o -> %s', async (thrown, expected) => { + mockTransferHolder.mockRejectedValueOnce(thrown) + const { result } = renderHook(() => + useContractFunctionHook(mockContract, 'transferHolder' as any) + ) + await act(async () => { + await result.current.send({}) + }) + expect(result.current.errorMessage).toBe(expected) +})Also applies to: 168-241, 243-289
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/hooks/useContractFunctionHook.test.tsx` around lines 65 - 167, Replace the repeated individual tests mapping numeric error codes with a table-driven test using Jest's it.each: gather the mappings (e.g., 4001 -> "User Rejected Transaction", 4100 -> "Unauthorized: Account or method not authorized", 4900 -> "Wallet Disconnected", -32603 -> "Internal Error", -32000 -> "Invalid Input", -32003 -> "Transaction Rejected") and iterate over them; inside the it.each body, call useContractFunctionHook(mockContract, 'transferHolder'), mockTransferHolder.mockRejectedValueOnce({ code }), invoke result.current.send({}) via act, and assert result.current.errorMessage (and state where applicable, e.g., code 4001 should assert state === 'ERROR'); keep references to useContractFunctionHook, mockTransferHolder, and send so the new test replaces the repetitive tests and can be extended easily.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/common/contexts/providerContext.tsx`:
- Line 13: The file providerContext.tsx is importing NETWORK_NAME from
src/configs/chain-config which diverges from src/main.tsx’s source; update
providerContext.tsx to use the single canonical network constant used by the app
(import NETWORK_NAME from the same env-config module used by src/main.tsx or the
shared central export) and ensure getCurrentProvider() and any other references
(e.g., the logic around getCurrentProvider() and the code at the block around
lines 51-56) use that same NETWORK_NAME source so non-hook consumers and the app
context use the identical chain value.
In `@src/components/common/Tag/Tag.tsx`:
- Line 17: The div in Tag.tsx currently builds its class list as `${rounded}
${className}` which can emit a literal "undefined" token when className is not
provided; update the class construction used in the JSX (the div that spreads
{...props}) to only include className when it exists—e.g., concatenate with a
conditional or use a small utility (clsx/classnames) so the rendered class
string for the element (and the rounded variable) never contains "undefined".
In `@src/components/home/VerifySection/DocumentRenderer.tsx`:
- Line 331: In DocumentRenderer (the JSX that renders <Spinner
data-testid={'loader'} />), fix the loading text punctuation by replacing
"Loading document preview.." with either "Loading document preview…"
(single-character ellipsis) or "Loading document preview." for consistency;
update the string adjacent to the Spinner so tests and UI show the corrected
punctuation.
In `@src/components/home/VerifySection/VerifySection.tsx`:
- Around line 148-150: The root container in VerifySection (the JSX div with
className including "verify-section") forces min-w-[360px], causing horizontal
scroll on narrow viewports; remove the min-w-[360px] token and use w-full (while
keeping the existing max-w-[1440px] and the isDarkMode conditional) so the root
div becomes responsive on small screens without breaking the max width
constraint.
In `@src/index.css`:
- Around line 3411-3414: There are extra blank lines before the declarations
that violate stylelint's declaration-empty-line-before rule; remove the empty
line between the "row-gap: 0px;" declaration and the following "min-width:
187px;" so the block reads consecutively (row-gap, min-width, max-width), and
apply the identical removal to the other block containing the same "min-width"
and "max-width" declarations referenced in the comment.
- Line 318: The stylelint keyword-case rule is tripping on the color keyword;
change the value used with -webkit-text-fill-color from "currentColor" (or any
mixed/capitalized form) to the lowercase "currentcolor" to satisfy linting —
locate the occurrence of the -webkit-text-fill-color declaration and replace its
value with currentcolor.
- Line 607: The CSS declaration "min-width: 360px" is causing horizontal
overflow on 320px devices; locate the occurrence of min-width: 360px and either
reduce it to min-width: 320px to match the app baseline or remove it and replace
with a responsive rule (e.g., wrap the larger-minimum layout in a media query
like `@media` (min-width: 361px) { ... } so the constraint only applies on wider
viewports) to prevent forced horizontal scrolling.
---
Nitpick comments:
In `@src/components/common/contexts/providerContext.tsx`:
- Line 39: The code creates a URL with two resolution paths which duplicates
logic; in createProvider replace the dual lookup with a single call to getRpcUrl
and use its result directly (remove the fallback to ChainInfo[chainId]?.rpcUrl),
i.e., change the url assignment so it only assigns getRpcUrl(String(chainId));
update any downstream assumptions if null/undefined can be returned by
getRpcUrl; ensure references to getRpcUrl and the url variable in createProvider
remain consistent.
In
`@src/components/common/contexts/TokenInformationContext/TokenInformationContext.tsx`:
- Around line 415-425: Add a short comment above the errorMessage aggregation
explaining that the || chain intentionally returns the first truthy error and
therefore establishes a precedence among changeHolderErrorMessage,
destroyTokenErrorMessage, endorseBeneficiaryErrorMessage,
transferOwnersErrorMessage, nominateErrorMessage,
rejectTransferOwnerErrorMessage, rejectTransferHolderErrorMessage,
rejectTransferOwnerHolderErrorMessage, restoreTokenErrorMessage, and
returnToIssuerErrorMessage; mention this is acceptable because only one
operation is expected to be active at a time and note that if concurrent
failures become possible, the aggregation should be revisited to surface
multiple errors or combine messages.
In `@src/hooks/useContractFunctionHook.test.tsx`:
- Around line 65-167: Replace the repeated individual tests mapping numeric
error codes with a table-driven test using Jest's it.each: gather the mappings
(e.g., 4001 -> "User Rejected Transaction", 4100 -> "Unauthorized: Account or
method not authorized", 4900 -> "Wallet Disconnected", -32603 -> "Internal
Error", -32000 -> "Invalid Input", -32003 -> "Transaction Rejected") and iterate
over them; inside the it.each body, call useContractFunctionHook(mockContract,
'transferHolder'), mockTransferHolder.mockRejectedValueOnce({ code }), invoke
result.current.send({}) via act, and assert result.current.errorMessage (and
state where applicable, e.g., code 4001 should assert state === 'ERROR'); keep
references to useContractFunctionHook, mockTransferHolder, and send so the new
test replaces the repetitive tests and can be extended easily.
In `@src/pages/Home/index.tsx`:
- Line 13: Replace the fixed p-[80px] on the main container div in the Home
component (the <div className="flex flex-col items-center p-[80px]
max-w-[1440px] mx-auto">) with responsive Tailwind spacing utilities so small
viewports get reduced padding and larger viewports keep larger gaps; for example
use breakpointed classes (sm:*, md:*, lg:*) such as smaller x/y padding on
mobile and larger on md/lg to maintain layout (e.g., sm:px-4 sm:py-8 md:px-8
md:py-16 lg:py-20), ensuring you update the className string on that div
accordingly.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: d09142e0-84c0-44b5-85c1-cc18861a6ea1
📒 Files selected for processing (28)
src/components/AssetManagementPanel/AssetManagementApplication/index.tsxsrc/components/AssetManagementPanel/AssetManagementForm/AssetManagementForm.test.tsxsrc/components/AssetManagementPanel/AssetManagementForm/AssetManagementForm.tsxsrc/components/AssetManagementPanel/AssetManagementForm/FormVariants/ActionForm/ActionForm.test.tsxsrc/components/AssetManagementPanel/AssetManagementForm/FormVariants/ActionForm/ActionForm.tsxsrc/components/AssetManagementPanel/AssetManagementForm/FormVariants/ActionForm/types.tssrc/components/AssetManagementPanel/AssetManagementForm/FormVariants/ActionSelectionForm/ActionSelectionForm.tsxsrc/components/common/Button/Button.tsxsrc/components/common/Navbar/Navbar.tsxsrc/components/common/Overlay/OverlayContent/DocumentTransferMessage.test.tsxsrc/components/common/Overlay/OverlayContent/DocumentTransferMessage.tsxsrc/components/common/SelectField/SelectField.tsxsrc/components/common/Tag/Tag.tsxsrc/components/common/contexts/TokenInformationContext/TokenInformationContext.tsxsrc/components/common/contexts/providerContext.tsxsrc/components/home/EndorsementChain/EndorsementChain.tsxsrc/components/home/VerifySection/DocumentRenderer.tsxsrc/components/home/VerifySection/VerifyError.tsxsrc/components/home/VerifySection/VerifyResult.tsxsrc/components/home/VerifySection/VerifySection.test.tsxsrc/components/home/VerifySection/VerifySection.tsxsrc/hooks/useContractFunctionHook.test.tsxsrc/hooks/useContractFunctionHook.tsxsrc/index.csssrc/main.tsxsrc/pages/Home/index.tsxsrc/pages/News/components/NewsArticlesContent.tsxsrc/pages/NewsDetail/components/NewsDetailBody.tsx
| useState, | ||
| } from 'react' | ||
| import { INFURA_API_KEY, NETWORK_NAME } from '../../../configs/chain-config' | ||
| import { NETWORK_NAME } from '../../../configs/chain-config' |
There was a problem hiding this comment.
Use a single NETWORK_NAME source to prevent chain drift.
src/main.tsx resolves the app default chain from src/configs/env-config, but this file resolves getCurrentProvider() from src/configs/chain-config. If those ever diverge, non-hook provider consumers can run on a different chain than the app context.
Suggested fix
-import { NETWORK_NAME } from '../../../configs/chain-config'
+import { NETWORK_NAME } from '../../../configs/env-config'Also applies to: 51-56
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/common/contexts/providerContext.tsx` at line 13, The file
providerContext.tsx is importing NETWORK_NAME from src/configs/chain-config
which diverges from src/main.tsx’s source; update providerContext.tsx to use the
single canonical network constant used by the app (import NETWORK_NAME from the
same env-config module used by src/main.tsx or the shared central export) and
ensure getCurrentProvider() and any other references (e.g., the logic around
getCurrentProvider() and the code at the block around lines 51-56) use that same
NETWORK_NAME source so non-hook consumers and the app context use the identical
chain value.
| className={`inline-block py-1 px-2 ${rounded} ${className}`} | ||
| {...props} | ||
| > | ||
| <div className={`${rounded} ${className}`} {...props}> |
There was a problem hiding this comment.
Avoid emitting undefined into the DOM class list.
At Line 17, optional className can render as a literal undefined class token.
Suggested fix
- <div className={`${rounded} ${className}`} {...props}>
+ <div className={[rounded, className].filter(Boolean).join(' ')} {...props}>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div className={`${rounded} ${className}`} {...props}> | |
| <div className={[rounded, className].filter(Boolean).join(' ')} {...props}> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/common/Tag/Tag.tsx` at line 17, The div in Tag.tsx currently
builds its class list as `${rounded} ${className}` which can emit a literal
"undefined" token when className is not provided; update the class construction
used in the JSX (the div that spreads {...props}) to only include className when
it exists—e.g., concatenate with a conditional or use a small utility
(clsx/classnames) so the rendered class string for the element (and the rounded
variable) never contains "undefined".
| <div className="flex flex-col items-center gap-2"> | ||
| <Spinner data-testid={'loader'} fill="white" /> Loading document | ||
| preview.. | ||
| <Spinner data-testid={'loader'} /> Loading document preview.. |
There was a problem hiding this comment.
Fix loading-copy punctuation.
Line 331 shows Loading document preview.. (double period). Please use a standard ellipsis or single period for consistency.
✏️ Proposed copy fix
- <Spinner data-testid={'loader'} /> Loading document preview..
+ <Spinner data-testid={'loader'} /> Loading document preview...📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Spinner data-testid={'loader'} /> Loading document preview.. | |
| <Spinner data-testid={'loader'} /> Loading document preview... |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/home/VerifySection/DocumentRenderer.tsx` at line 331, In
DocumentRenderer (the JSX that renders <Spinner data-testid={'loader'} />), fix
the loading text punctuation by replacing "Loading document preview.." with
either "Loading document preview…" (single-character ellipsis) or "Loading
document preview." for consistency; update the string adjacent to the Spinner so
tests and UI show the corrected punctuation.
| <div | ||
| className={`min-w-[360px] max-w-[1440px] verify-section ${isDarkMode ? 'dark-mode' : ''}`} | ||
| > |
There was a problem hiding this comment.
Avoid forcing a 360px minimum width on the root container.
Line 149 adds min-w-[360px], which can cause horizontal scrolling on narrower mobile viewports (e.g., 320px devices). Prefer w-full with only max-w constraints.
📱 Proposed responsive fix
- <div
- className={`min-w-[360px] max-w-[1440px] verify-section ${isDarkMode ? 'dark-mode' : ''}`}
- >
+ <div
+ className={`w-full max-w-[1440px] verify-section ${isDarkMode ? 'dark-mode' : ''}`}
+ >📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div | |
| className={`min-w-[360px] max-w-[1440px] verify-section ${isDarkMode ? 'dark-mode' : ''}`} | |
| > | |
| <div | |
| className={`w-full max-w-[1440px] verify-section ${isDarkMode ? 'dark-mode' : ''}`} | |
| > |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/home/VerifySection/VerifySection.tsx` around lines 148 - 150,
The root container in VerifySection (the JSX div with className including
"verify-section") forces min-w-[360px], causing horizontal scroll on narrow
viewports; remove the min-w-[360px] token and use w-full (while keeping the
existing max-w-[1440px] and the isDarkMode conditional) so the root div becomes
responsive on small screens without breaking the max width constraint.
| background: none; | ||
| -webkit-background-clip: initial; | ||
| background-clip: initial; | ||
| -webkit-text-fill-color: currentColor; |
There was a problem hiding this comment.
Line 318 fails stylelint keyword-case rule.
currentColor should be lowercase to satisfy the configured linter rule.
Proposed fix
- -webkit-text-fill-color: currentColor;
+ -webkit-text-fill-color: currentcolor;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| -webkit-text-fill-color: currentColor; | |
| -webkit-text-fill-color: currentcolor; |
🧰 Tools
🪛 Stylelint (17.9.0)
[error] 318-318: Expected "currentColor" to be "currentcolor" (value-keyword-case)
(value-keyword-case)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/index.css` at line 318, The stylelint keyword-case rule is tripping on
the color keyword; change the value used with -webkit-text-fill-color from
"currentColor" (or any mixed/capitalized form) to the lowercase "currentcolor"
to satisfy linting — locate the occurrence of the -webkit-text-fill-color
declaration and replace its value with currentcolor.
| .overlay-border-shadow { | ||
| align-self: stretch; | ||
| min-width: min(340px, 100%); | ||
| min-width: 360px; |
There was a problem hiding this comment.
Line 607 introduces mobile overflow risk on 320px screens.
min-width: 360px conflicts with the app’s 320px baseline and can force horizontal scroll/clipping on small devices.
Proposed fix
.overlay-border-shadow {
align-self: stretch;
- min-width: 360px;
+ min-width: min(360px, 100%);
padding: 16px;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| min-width: 360px; | |
| .overlay-border-shadow { | |
| align-self: stretch; | |
| min-width: min(360px, 100%); | |
| padding: 16px; |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/index.css` at line 607, The CSS declaration "min-width: 360px" is causing
horizontal overflow on 320px devices; locate the occurrence of min-width: 360px
and either reduce it to min-width: 320px to match the app baseline or remove it
and replace with a responsive rule (e.g., wrap the larger-minimum layout in a
media query like `@media` (min-width: 361px) { ... } so the constraint only
applies on wider viewports) to prevent forced horizontal scrolling.
| row-gap: 0px; | ||
|
|
||
| min-width: 187px; | ||
| max-width: 538px; |
There was a problem hiding this comment.
Extra blank lines violate stylelint declaration spacing rules.
The empty lines before min-width in these blocks trigger declaration-empty-line-before.
Proposed fix
.dropdown-btn-frame {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
align-items: flex-start;
align-content: flex-end;
padding: 0px;
row-gap: 0px;
-
min-width: 187px;
max-width: 538px;
}
.tag-frame {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start;
padding: 0px;
-
min-width: 187px;
}Also applies to: 3440-3443
🧰 Tools
🪛 Stylelint (17.9.0)
[error] 3413-3413: Expected no empty line before declaration (declaration-empty-line-before)
(declaration-empty-line-before)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/index.css` around lines 3411 - 3414, There are extra blank lines before
the declarations that violate stylelint's declaration-empty-line-before rule;
remove the empty line between the "row-gap: 0px;" declaration and the following
"min-width: 187px;" so the block reads consecutively (row-gap, min-width,
max-width), and apply the identical removal to the other block containing the
same "min-width" and "max-width" declarations referenced in the comment.
Summary by CodeRabbit
Release Notes
New Features
Improvements
Bug Fixes