From 3eae4283b5645e0556838913cd0a2c13656580fd Mon Sep 17 00:00:00 2001
From: Richard Steinmetz <richard@steinmetz.cloud>
Date: Mon, 17 Feb 2025 17:22:02 +0100
Subject: [PATCH] fix: keyboard shortcut modal not being responsive

Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>
---
 css/app-settings.scss                         |  45 -------
 .../Settings/ShortcutOverview.vue             | 115 +++++++++++++-----
 2 files changed, 83 insertions(+), 77 deletions(-)

diff --git a/css/app-settings.scss b/css/app-settings.scss
index 4473adbef8..f4ee21a9dc 100644
--- a/css/app-settings.scss
+++ b/css/app-settings.scss
@@ -57,51 +57,6 @@
 	}
 }
 
-.shortcut-overview-modal {
-	.modal-container {
-		display: flex !important;
-		flex-wrap: wrap;
-		padding: 0 12px 12px 12px !important;
-
-		* {
-			box-sizing: border-box;
-		}
-
-		.shortcut-section {
-			width: 50%;
-			flex-grow: 0;
-			flex-shrink: 0;
-			padding: 10px;
-
-			.shortcut-section-item {
-				width: 100%;
-				display: grid;
-				grid-template-columns: 33% 67%;
-				column-gap: 10px;
-
-				&:not(:first-child) {
-					margin-top: 10px;
-				}
-
-				&__keys {
-					display: block;
-					text-align: right;
-				}
-
-				&__label {
-					display: block;
-					text-align: left;
-					padding-top: 5px;
-				}
-
-				&__spacer {
-					margin: 0 3px;
-				}
-			}
-		}
-	}
-}
-
 // Fix the shortcut overview on smaller screens
 @media screen and (max-width: 800px) {
 	.shortcut-overview-modal .modal-container .shortcut-section {
diff --git a/src/components/AppNavigation/Settings/ShortcutOverview.vue b/src/components/AppNavigation/Settings/ShortcutOverview.vue
index c946c7a971..b3abd752a6 100644
--- a/src/components/AppNavigation/Settings/ShortcutOverview.vue
+++ b/src/components/AppNavigation/Settings/ShortcutOverview.vue
@@ -3,49 +3,51 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<Modal class="shortcut-overview-modal"
-		size="large"
+	<NcDialog size="large"
 		:name="$t('calendar', 'Shortcut overview')"
-		@close="$emit('close')">
-		<section v-for="category in shortcuts"
-			:key="category.categoryId"
-			class="shortcut-section">
-			<h3 class="shortcut-section__header">
-				{{ category.categoryLabel }}
-			</h3>
-			<div v-for="(shortcut, index) in category.shortcuts"
-				:key="`${category.categoryId}-${index}`"
-				class="shortcut-section-item">
-				<span class="shortcut-section-item__keys">
-					<template v-for="(keyCombination, index2) of shortcut.keys">
-						<template v-for="(key, index3) in keyCombination">
-							<kbd :key="`${category.categoryId}-${index}-${index2}-${index3}`">{{ key }}</kbd>
-							<span v-if="index3 !== (keyCombination.length - 1)"
-								:key="`${category.categoryId}-${index}-${index2}-${index3}`"
+		:closeOnClickOutside="true"
+		@update:open="onUpdateOpen">
+		<div class="shortcut-overview-modal">
+			<section v-for="category in shortcuts"
+				:key="category.categoryId"
+				class="shortcut-section">
+				<h3 class="shortcut-section__header">
+					{{ category.categoryLabel }}
+				</h3>
+				<div v-for="(shortcut, index) in category.shortcuts"
+					:key="`${category.categoryId}-${index}`"
+					class="shortcut-section-item">
+					<span class="shortcut-section-item__keys">
+						<template v-for="(keyCombination, index2) of shortcut.keys">
+							<template v-for="(key, index3) in keyCombination">
+								<kbd :key="`${category.categoryId}-${index}-${index2}-${index3}`">{{ key }}</kbd>
+								<span v-if="index3 !== (keyCombination.length - 1)"
+									:key="`${category.categoryId}-${index}-${index2}-${index3}`"
+									class="shortcut-section-item__spacer">
+									+
+								</span>
+							</template>
+							<span v-if="index2 !== (shortcut.keys.length - 1)"
+								:key="`${category.categoryId}-${index}-${index2}`"
 								class="shortcut-section-item__spacer">
-								+
+								{{ $t('calendar', 'or') }}
 							</span>
 						</template>
-						<span v-if="index2 !== (shortcut.keys.length - 1)"
-							:key="`${category.categoryId}-${index}-${index2}`"
-							class="shortcut-section-item__spacer">
-							{{ $t('calendar', 'or') }}
-						</span>
-					</template>
-				</span>
-				<span class="shortcut-section-item__label">{{ shortcut.label }}</span>
-			</div>
-		</section>
-	</Modal>
+					</span>
+					<span class="shortcut-section-item__label">{{ shortcut.label }}</span>
+				</div>
+			</section>
+		</div>
+	</NcDialog>
 </template>
 
 <script>
 import { translate as t } from '@nextcloud/l10n'
-import { NcModal as Modal } from '@nextcloud/vue'
+import { NcDialog } from '@nextcloud/vue'
 
 export default {
 	components: {
-		Modal,
+		NcDialog,
 	},
 	computed: {
 		shortcuts() {
@@ -110,5 +112,54 @@ export default {
 			}]
 		},
 	},
+	methods: {
+		onUpdateOpen(open) {
+			if (!open) {
+				this.$emit('close')
+			}
+		}
+	},
 }
 </script>
+
+<style lang="scss" scoped>
+.shortcut-overview-modal {
+	display: flex;
+	flex-wrap: wrap;
+
+	.shortcut-section {
+		width: 50%;
+		min-width: 425px;
+		flex-grow: 0;
+		flex-shrink: 0;
+		padding: 10px;
+		box-sizing: border-box;
+
+		.shortcut-section-item {
+			width: 100%;
+			display: grid;
+			grid-template-columns: 33% 67%;
+			column-gap: 10px;
+
+			&:not(:first-child) {
+				margin-top: 10px;
+			}
+
+			&__keys {
+				display: block;
+				text-align: right;
+			}
+
+			&__label {
+				display: block;
+				text-align: left;
+				padding-top: 5px;
+			}
+
+			&__spacer {
+				margin: 0 3px;
+			}
+		}
+	}
+}
+</style>