-
-
Notifications
You must be signed in to change notification settings - Fork 2.6k
fix(docs): Resolve logo overlap on tablet view #5853
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
Signed-off-by: Dedy F. Setyawan <[email protected]>
✅ Deploy Preview for localai ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Good catch! however I think we want to still override the logo from the theme, maybe we can try to apply a different class to make the svg display in a smaller view? |
Signed-off-by: Dedy F. Setyawan <[email protected]>
Thanks for the feedback! I've updated the PR to use a dedicated CSS file ( Please let me know if you have any further feedback. |
@@ -8,9 +8,9 @@ | |||
{{ .Content | safeHTML }} | |||
{{ end }} | |||
</div> | |||
<div class="big"> | |||
<div class="big header-logo"> |
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.
to be fair I would avoid to bring in the template header override just for a single class definition - can we maybe define it in the top-header.html file, or inline as it's a one-off?
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.
Got it! Makes sense to avoid the full partial override for this.
I've updated the PR to use a <style>
block directly in top-header.html
.
Let me know if that works!
Signed-off-by: Dedy F. Setyawan <[email protected]>
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.
Thank you!
Description
This PR addresses a display bug where the
logo.svg
was improperly scaled and caused content overlap on tablet devices.The problem manifested when viewing the documentation on tablet screen sizes, where the original
logo.svg
rendered too large and overlapped portions of the main content.This commit resolves the issue by replacing the oversized
logo.svg
withmark.svg
and explicitly setting its width to22px
. This ensures the logo is appropriately sized for tablet displays, effectively eliminating the overlap issue and achieving visual consistency with the mobile version of the site.This PR fixes # N/A
Notes for Reviewers
To verify this fix:
mark.svg
(notlogo.svg
), appears correctly sized, and no longer overlaps the content. Also, observe if its appearance is consistent with the mobile view.Screenshots:

Before:
After:

Signed commits