docs: resize SevenSegDisplay figure

[vamshikrishnaramasamy]

Summary

• replace the SevenSegDisplay figure markdown image with a centered responsive image
• cap the figure height at 70vh while preserving aspect ratio and max width

Fixes #494

Test

• npm run build

Notes

• Build passes with existing broken-anchor warnings unrelated to this change.

Summary by CodeRabbit

• Documentation
  • Improved visual presentation of component diagrams with enhanced styling and centering
  • Added responsive layout improvements for documentation images
  • Updated formatting for better readability and display across different screen sizes

[coderabbitai]

Walkthrough

In docs/chapter4/3output.md, the SevenSegDisplay pin-description figure is changed from a plain Markdown image (![](...)) to an HTML <div> containing an <img> element with explicit src, alt, and style attributes that set a maximum height and a responsive width, addressing the issue where the image exceeded the viewport and required vertical scrolling. Additionally, the RGB Led Matrix section's embedded simulator <iframe> line is replaced with equivalent markup.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'docs: resize SevenSegDisplay figure' directly reflects the main change in the PR—converting the SevenSegDisplay image to a centered, responsive implementation with constrained height.
Linked Issues check	✅ Passed	The PR successfully addresses issue #494 by replacing the standard markdown image with a responsive HTML/JSX implementation that caps height at 70vh and applies max-width, ensuring the SevenSegDisplay pin diagram fits within the viewport without scrolling.
Out of Scope Changes check	✅ Passed	The PR modifies only the SevenSegDisplay section's image styling as required by issue #494; the iframe replacement in the RGB Led Matrix section appears incidental but remains within documentation updates scope.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

🧹 Nitpick comments (1)

docs/chapter4/3output.md (1)

238-238: 🧹 Nitpick | 🔵 Trivial | ⚡ Quick win

Clean up incomplete CSS property values in the iframe style attribute.

The RGB Led Matrix iframe contains CSS properties with no values: border-width:; border-style: ; border-color:;. These should either be removed or assigned valid values.

♻️ Proposed cleanup

- <iframe src="https://circuitverse.org/simulator/embed/rgbled-ad6e513a-6174-4d30-bd4b-a97b8934950b?theme=&display_title=false&clock_time=true&fullscreen=true&zoom_in_out=true" style="border-width:; border-style: ; border-color:;" name="myiframe" id="projectPreview" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="500" width="500" allowFullScreen></iframe>
+ <iframe src="https://circuitverse.org/simulator/embed/rgbled-ad6e513a-6174-4d30-bd4b-a97b8934950b?theme=&display_title=false&clock_time=true&fullscreen=true&zoom_in_out=true" name="myiframe" id="projectPreview" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="500" width="500" allowFullScreen></iframe>

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 7c84c84d-b20e-4b74-8875-37c9256c7549

📥 Commits

Reviewing files that changed from the base of the PR and between 9d32941 and 4f42d88.

📒 Files selected for processing (1)

• docs/chapter4/3output.md