Merge pull request #7807 from nextcloud-libraries/fix/NcHotkeyList--align-offset

fix(NcHotkeyList): align with form labels

Author: susnux

src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue

@@ -688,6 +688,21 @@ export default {
 			<NcAppSettingsSection id="about" name="About">
 				<NcFormGroup label="Acknowledgements" description="This application includes CKEditor, an open-source editor. Copyright (C) CKEditor contributors. Licensed under GPLv2." />
 			</NcAppSettingsSection>
+
+			<NcAppSettingsSectionShortcuts>
+				<NcHotkeyList>
+					<NcHotkey label="Compose new message" hotkey="C" />
+					<NcHotkey label="Newer message" hotkey="ArrowLeft" />
+					<NcHotkey label="Older message" hotkey="ArrowRight" />
+					<NcHotkey label="Toggle star" hotkey="S" />
+					<NcHotkey label="Toggle unread" hotkey="U" />
+					<NcHotkey label="Archive" hotkey="A" />
+					<NcHotkey label="Delete" hotkey="Delete" />
+					<NcHotkey label="Search" hotkey="Control F" />
+					<NcHotkey label="Send" hotkey="Control Enter" />
+					<NcHotkey label="Refresh" hotkey="R" />
+				</NcHotkeyList>
+			</NcAppSettingsSectionShortcuts>
 		</NcAppSettingsDialog>
 	</div>
 </template>

src/components/NcHotkey/NcHotkey.vue

@@ -58,10 +58,11 @@ const NO_LABEL_WARNING = '⚠️ NcHotKey must have a label or slot content'
 
 <style lang="scss" module>
 .hotkey {
+	--form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));
 	display: flex;
 	flex-direction: row-reverse;
 	align-items: stretch;
-	padding-inline: var(--border-radius-element); /* Align with form group */
+	padding-inline: var(--form-element-label-offset);
 
 	&:first-child {
 		.hotkey__label,

src/components/NcHotkeyList/NcHotkeyList.vue

@@ -41,13 +41,14 @@ const labelId = `NcHotkeyList_${createElementId()}`
 
 <style module>
 .hotkeyList {
+	--form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));
 	/* Too wide list is less readable - 400px seems a good width */
 	max-width: 400px;
 }
 
 .hotkeyList__heading {
 	font-weight: bold;
-	margin-inline: var(--border-radius-element); /* Align with form group */
+	margin-inline: var(--form-element-label-offset);
 }
 </style>