-
Notifications
You must be signed in to change notification settings - Fork 52
JWT Decoder added and layout issue fixed #277
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughIntroduces a JWT Decoder tool: adds lucide-react dependency, implements JwtDecoder component with parsing/decoding utilities, wires it into DevArea tools and links, and adjusts Layout to wrap children in a container for spacing. No backend changes. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant DT as DevArea/DevTools
participant JD as JWTDecoder
participant Util as parseJWT/decodeBase64UrlJson
participant CB as Clipboard API
U->>DT: Select "JWT Decoder"
DT->>JD: Render component
U->>JD: Paste token + click Decode
JD->>Util: parseJWT(token)
Util-->>JD: {header, payload, signature} or error
alt Success
JD-->>U: Show header/payload JSON and signature
U->>JD: Click Copy Payload
JD->>CB: writeText(payload)
CB-->>JD: resolve/reject
JD-->>U: Copy status
else Error
JD-->>U: Display error message
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related issues
Possibly related PRs
Suggested labels
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 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. Comment |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lock
is excluded by!**/yarn.lock
,!**/*.lock
📒 Files selected for processing (5)
package.json
(1 hunks)src/components/DevAreaTools/JwtDecoder.jsx
(1 hunks)src/components/Layout/Layout.jsx
(1 hunks)src/pages/DevArea/DevTools.jsx
(1 hunks)src/pages/DevArea/index.jsx
(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
src/pages/DevArea/DevTools.jsx (2)
src/pages/DevArea/index.jsx (1)
tools
(7-48)src/components/DevAreaTools/JwtDecoder.jsx (1)
JWTDecoder
(47-173)
<div className="container mx-auto p-4 min-h-screen"> | ||
{children} | ||
</div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Revert the global container wrapper to avoid breaking page layouts.
Layout
wraps every page. Forcing a .container mx-auto min-h-screen
around all children clamps their width and adds another viewport-height requirement on top of the existing flex layout. That combination causes full-width pages (hero sections, canvases, editors) to collapse into the container breakpoint and introduces guaranteed vertical overflow because the header + footer now sit on top of a second min-h-screen
. Please drop this wrapper (or make it opt-in per page) so existing screens keep their layout stability.
- <div className='relative'>
- <div className="container mx-auto p-4 min-h-screen">
- {children}
- </div>
- </div>
+ <div className='relative'>
+ {children}
+ </div>
📝 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="container mx-auto p-4 min-h-screen"> | |
{children} | |
</div> | |
<div className='relative'> | |
{children} | |
</div> |
🤖 Prompt for AI Agents
In src/components/Layout/Layout.jsx around lines 19-21, the component currently
wraps every page with a forced <div className="container mx-auto p-4
min-h-screen"> which clamps width and enforces a second min-h-screen; remove
that global wrapper so children are rendered directly to preserve full-width and
existing flex layouts. If an opt-in container is needed, replace the hard
wrapper with a conditional: accept a prop (e.g., useContainer or
containerClassName) and only apply the container classes when that prop is
true/provided, or move the container markup into pages that actually require it.
this pr closes #275 and #274
Summary by CodeRabbit
New Features
Style
Chores