fix(gnoweb): UI batch

[alexiscolin]

This PR addresses various UI/UX issues and improves the overall user experience across different platforms and browsers.

Changes

Visual Improvements

• Responsive header: Enhanced mobile experience, particularly useful for home page on mobile devices
• Image link tooltip positioning: Fixed tooltip positioning on Safari browser
• Margin adjustments: Improved spacing for realm-view content and alert components

Bug Fixes

• Fast command copy: Removed unnecessary comments from fast command code copy functionality
• Enable p and r to be clickable/browsable: Make breadcrumb navigation more interactive on breadcrumb for better UX
• Source page logging: Cleaned up logging from source page
• Source page padding: Added proper top padding to source pages
• Windows link emojis: Removed emoji display from links on Windows platform
• iPad summary markers: Fixed summary marker display issues on iPad devices

Platform-Specific Fixes

• Safari compatibility: Fixed image link tooltip positioning issues
• Windows compatibility: Removed emoji characters from links to prevent display issues
• iPad compatibility: Resolved summary marker rendering problems

CSS Improvements

• Realm-view margins: Optimized margin handling for paragraphs containing only image links
• Alert margins: Adjusted markdown alert component margins for better visual hierarchy
• Responsive design: Enhanced header responsiveness for better mobile experience
• On this page: Remove ToC title when the ToC is empty.

Impact

These changes improve the overall user experience by:

• Providing better mobile responsiveness
• Ensuring consistent behavior across different browsers and platforms
• Fixing visual inconsistencies and spacing issues
• Cleaning up unnecessary code and logging

[Gno2D2]

🛠 PR Checks Summary

All Automated Checks passed. ✅

Manual Checks (for Reviewers):

• IGNORE the bot requirements for this PR (force green CI check)

Read More

🤖 This bot helps streamline PR reviews by verifying automated checks and providing guidance for contributors and reviewers.

✅ Automated Checks (for Contributors):

🟢 Maintainers must be able to edit this pull request (more info)
🟢 Changes related to gnoweb must be reviewed by its codeowners
🟢 Pending initial approval by a review team member, or review from tech-staff

☑️ Contributor Actions:

1. Fix any issues flagged by automated checks.
2. Follow the Contributor Checklist to ensure your PR is ready for review.
   • Add new tests, or document why they are unnecessary.
   • Provide clear examples/screenshots, if necessary.
   • Update documentation, if required.
   • Ensure no breaking changes, or include BREAKING CHANGE notes.
   • Link related issues/PRs, where applicable.

☑️ Reviewer Actions:

1. Complete manual checks for the PR, including the guidelines and additional checks if applicable.

📚 Resources:

• Report a bug with the bot.
• View the bot’s configuration file.

Debug

Automated Checks

Maintainers must be able to edit this pull request (more info)

If

🟢 Condition met
└── 🟢 And
    ├── 🟢 The base branch matches this pattern: ^master$
    └── 🟢 The pull request was created from a fork (head branch repo: alexiscolin/gno)

Then

🟢 Requirement satisfied
└── 🟢 Maintainer can modify this pull request

Changes related to gnoweb must be reviewed by its codeowners

If

🟢 Condition met
└── 🟢 And
    ├── 🟢 The base branch matches this pattern: ^master$
    └── 🟢 A changed file matches this pattern: ^gno.land/pkg/gnoweb/ (filename: gno.land/pkg/gnoweb/components/layouts/article.html)

Then

🟢 Requirement satisfied
└── 🟢 Or
    ├── 🟢 Or
    │   ├── 🟢 And
    │   │   ├── 🟢 Pull request author is user: alexiscolin
    │   │   └── 🟢 This user reviewed pull request: gfanton (with state "APPROVED")
    │   └── 🔴 And
    │       ├── 🔴 Pull request author is user: gfanton
    │       └── 🔴 This user reviewed pull request: alexiscolin (with state "APPROVED")
    └── 🔴 And
        ├── 🔴 Not (🟢 Pull request author is user: alexiscolin)
        ├── 🟢 Not (🔴 Pull request author is user: gfanton)
        └── 🟢 Or
            ├── 🔴 This user reviewed pull request: alexiscolin (with state "APPROVED")
            └── 🟢 This user reviewed pull request: gfanton (with state "APPROVED")

Pending initial approval by a review team member, or review from tech-staff

If

🟢 Condition met
└── 🟢 And
    ├── 🟢 The base branch matches this pattern: ^master$
    └── 🟢 Not (🔴 Pull request author is a member of the team: tech-staff)

Then

🟢 Requirement satisfied
└── 🟢 If
    ├── 🟢 Condition
    │   └── 🟢 Or
    │       ├── 🟢 At least 1 user(s) of the organization reviewed the pull request (with state "APPROVED")
    │       ├── 🟢 At least 1 user(s) of the team tech-staff reviewed pull request
    │       └── 🔴 This pull request is a draft
    └── 🟢 Then
        └── 🟢 And
            ├── 🟢 Not (🔴 This label is applied to pull request: review/triage-pending)
            └── 🟢 At least 1 user(s) of the team tech-staff reviewed pull request

Manual Checks

**IGNORE** the bot requirements for this PR (force green CI check)

If

🟢 Condition met
└── 🟢 On every pull request

Can be checked by

• Any user with comment edit permission

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

📢 Thoughts on this report? Let us know!

[gfanton]

lgtm 👍

nit: On a large screen, I notice that the three dots menu is shifting to the right.
But maybe this is kind of wanted, im not sure.

[alexiscolin]

lgtm 👍

nit: On a large screen, I notice that the three dots menu is shifting to the right. But maybe this is kind of wanted, im not sure.

Wanted. It will be replaced by another icon (close) on the other view once we will have the dynamic sidebar. At that moment, it will feel more natural.