fix: left-align E2B logo in Ory auth flows for Safari#453
Conversation
Add self-start to the E2BLogoSmall SVG in OryCardHeader to ensure the logo is explicitly left-aligned in Safari, where w-fit alone does not prevent centering inside a flex-col container. Co-Authored-By: ben@e2b.dev <ben@e2b.dev>
devin-ai-integration
Bot
requested review from
Kraci,
ben-fornefeld,
drankou and
huv1k
as code owners
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
|
Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits. |
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
There was a problem hiding this comment.
LGTM, straightforward Safari CSS fix.
Extended reasoning...
Overview
This PR adds a single self-start Tailwind utility class to the E2BLogoSmall element in OryCardHeader to ensure it left-aligns properly in Safari, where flex-col's default align-items: stretch was centering the SVG despite w-fit.
Security risks
None. This is a pure CSS/styling change with no logic, data flow, auth, or permission implications.
Level of scrutiny
Minimal. This is a one-line cosmetic fix in auth flow UI styling, not the auth logic itself. The rationale is well-explained in the PR description, matches the approach Ory Elements uses in its own DefaultCardLogo, and the change is mechanically obvious.
Other factors
The bug hunting system found no issues. The change is self-contained to a single visual element and cannot affect functionality. Preview deployment is available for visual verification.
Safari doesn't correctly resolve width: fit-content on SVGs in flex-col contexts, causing the logo to appear centered. Removing w-fit lets the base w-auto (from E2BLogoSmall) take effect, which correctly computes width from the SVG's aspect ratio cross-browser. Co-Authored-By: ben@e2b.dev <ben@e2b.dev>
1 participant
Summary
The
E2BLogoSmallSVG inOryCardHeaderappears centered in Safari becausewidth: fit-content(w-fit) doesn't correctly resolve on SVGs in flex-col contexts — Safari computes a wider-than-expected element width, pushing the logo toward center.Fix: remove
w-fitso the basew-autofromE2BLogoSmalltakes effect (correctly derives width from height + viewBox aspect ratio cross-browser), and keepself-startto explicitly left-align the flex child.Affects all four Ory auth flows (login, registration, recovery, verification) since they share
OryCardHeader.Link to Devin session: https://app.devin.ai/sessions/c5e1ce36f7b443d891048d75ee873a88