chore: wrap keyboard shortcuts in container to avoid style collisions and override

This commit is contained in:
Yunus M
2026-01-29 16:45:07 +05:30
parent 7274d51236
commit 1016f6209e
2 changed files with 28 additions and 24 deletions

View File

@@ -1,27 +1,29 @@
.keyboard-shortcuts {
display: flex;
flex-direction: column;
margin-top: 1rem;
padding: 1rem;
gap: 24px;
width: 80%;
margin: 0 auto;
.shortcut-section {
.shortcuts-page-container {
.keyboard-shortcuts {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 1rem;
padding: 1rem;
gap: 24px;
width: 80%;
margin: 0 auto;
.shortcut-section-heading {
font-weight: 600;
font-size: 22px;
line-height: 1.3636363636363635;
}
.shortcut-section {
display: flex;
flex-direction: column;
gap: 12px;
tbody {
.shortcut-key {
font-family: 'Space Mono', monospace;
text-transform: uppercase;
.shortcut-section-heading {
font-weight: 600;
font-size: 22px;
line-height: 1.3636363636363635;
}
tbody {
.shortcut-key {
font-family: 'Space Mono', monospace;
text-transform: uppercase;
}
}
}
}

View File

@@ -25,10 +25,12 @@ function Shortcuts(): JSX.Element {
}
return (
<div className="keyboard-shortcuts">
{Object.keys(ALL_SHORTCUTS).map((shortcutSection) =>
getShortcutTable(shortcutSection),
)}
<div className="shortcuts-page-container">
<div className="keyboard-shortcuts">
{Object.keys(ALL_SHORTCUTS).map((shortcutSection) =>
getShortcutTable(shortcutSection),
)}
</div>
</div>
);
}