Skip to content

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

Merged
merged 3 commits into from
Jul 18, 2025

Conversation

dedyf5
Copy link
Contributor

@dedyf5 dedyf5 commented Jul 16, 2025

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 with mark.svg and explicitly setting its width to 22px. 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:

  1. Access the LocalAI documentation (e.g., https://localai.io/docs/overview/).
  2. Use a tablet device, a browser developer tool's responsive mode, or simply resize your browser window to simulate tablet dimensions.
  3. Confirm that the logo displayed is mark.svg (not logo.svg), appears correctly sized, and no longer overlaps the content. Also, observe if its appearance is consistent with the mobile view.

Screenshots:
Before:
overview-tablet-before

After:
overview-tablet-after

Signed commits

  • Yes, I signed my commits.

Copy link

netlify bot commented Jul 16, 2025

Deploy Preview for localai ready!

Name Link
🔨 Latest commit ec1e25b
🔍 Latest deploy log https://app.netlify.com/projects/localai/deploys/687a4e846f2ff30008877922
😎 Deploy Preview https://deploy-preview-5853--localai.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@mudler
Copy link
Owner

mudler commented Jul 17, 2025

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]>
@dedyf5
Copy link
Contributor Author

dedyf5 commented Jul 17, 2025

Thanks for the feedback! I've updated the PR to use a dedicated CSS file (docs/assets/css/custom.css) for the logo sizing, loaded via docs/layouts/partials/docs/head.html.

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">
Copy link
Owner

@mudler mudler Jul 18, 2025

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?

Copy link
Contributor Author

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!

Copy link
Owner

@mudler mudler left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you!

@mudler mudler merged commit a1d061c into mudler:master Jul 18, 2025
25 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants