Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Enhance snippet display with scrollbar #252

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

Conversation

Copy link
Contributor

@Devamchaudhari Devamchaudhari commented Feb 2, 2025

Description

  • This pull request introduces an improvement to the code snippet list by restricting its height and making it scrollable. The goal is to ensure that the language selection box remains accessible without requiring users to scroll excessively. This adjustment improves the overall user experience by maintaining easy access to the selection box while reducing unnecessary scrolling.

Type of Change

  • ✨ New snippet
  • 🛠 Improvement to an existing snippet
  • 🐞 Bug fix
  • 📖 Documentation update
  • 🔧 Other (please describe):

Checklist

  • I have tested my code and verified it works as expected.
  • My code follows the style and contribution guidelines of this project.
  • Comments are added where necessary for clarity.
  • Documentation has been updated (if applicable).
  • There are no new warnings or errors from my changes.

Related Issues

Closes #251

Additional Context

  • Restrict the Code Snippet List Height: Limit the height of the code snippet list and make it scrollable, ensuring the language selection box remains accessible without extra scrolling.

Screenshots (Optional)

Click to view screenshots

Copy link
Collaborator

@technoph1le technoph1le left a comment

Choose a reason for hiding this comment

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

Thanks for the adjustments. I have made some reviews. Please review them before we can proceed.

Devamchaudhari reacted with thumbs up emoji
}

.snippets::-webkit-scrollbar-thumb {
background: #888;
Copy link
Collaborator

@technoph1le technoph1le Feb 4, 2025

Choose a reason for hiding this comment

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

I advise using the CSS custom property for colors as there are dark and light mode.

Copy link
Contributor Author

@Devamchaudhari Devamchaudhari Feb 4, 2025

Choose a reason for hiding this comment

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

okay. I have implement these changes in this commit.
Commit Id: 07e5551

@@ -599,6 +599,25 @@ abbr {
auto-fill,
minmax(min(17.5rem, 100%), 1fr)
); /* [1] */
height: 100%;
max-height: 100vh;
Copy link
Collaborator

@technoph1le technoph1le Feb 4, 2025

Choose a reason for hiding this comment

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

What do you think about setting lower height like 90vh?

Also, setting min-height would ensure it doesn't get too small and squishy.

Copy link
Contributor Author

@Devamchaudhari Devamchaudhari Feb 4, 2025

Choose a reason for hiding this comment

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

Yeah, that's pretty great. I have done this changes in this commit.
Commit Id: 07e5551

@technoph1le technoph1le merged commit be5c643 into quicksnip-dev:main Feb 5, 2025
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@technoph1le technoph1le technoph1le approved these changes

@psychlone77 psychlone77 Awaiting requested review from psychlone77 psychlone77 is a code owner

@saminjay saminjay Awaiting requested review from saminjay saminjay is a code owner

@Mathys-Gasnier Mathys-Gasnier Awaiting requested review from Mathys-Gasnier Mathys-Gasnier is a code owner

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Feature] - Enhance Language Selection UX: Fix Position or Restrict Height of Code Snippet List

AltStyle によって変換されたページ (->オリジナル) /