Merge pull request #4350 from nextcloud-libraries/fix/3118-scrolled-m…

…odal-should-be-closeable

fix(NcModal): Close button should be visible even if modal content is scrolled

cypress/component/modal.cy.ts

@@ -0,0 +1,28 @@
+import { mount } from 'cypress/vue2'
+import NcModal from '../../src/components/NcModal/NcModal.vue'
+import type { Component } from 'vue'
+
+describe('NcModal', () => {
+	it('close button is visible when content is scrolled', () => {
+		mount(NcModal, {
+			propsData: {
+				show: true,
+				size: 'small',
+				name: 'Name',
+			},
+			slots: {
+				// Create two div as children, first is 100vh = overflows the content, second just gets some data attribute so we can scroll into view
+				default: {
+					render: (h) =>
+						h('div', [
+							h('div', { style: 'height: 100vh;' }),
+							h('div', { attrs: { 'data-cy': 'bottom' } }),
+						]),
+				} as Component,
+			},
+		})
+
+		cy.get('[data-cy="bottom"]').scrollIntoView()
+		cy.get('button.modal-container__close').should('be.visible')
+	})
+})

src/components/NcModal/NcModal.vue

@@ -271,8 +271,6 @@ export default {
 
 					<!-- Content -->
 					<div :id="'modal-description-' + randId" class="modal-container">
-						<!-- @slot Modal content to render -->
-						<slot />
 						<!-- Close modal -->
 						<NcButton v-if="canClose && closeButtonContained"
 							type="tertiary"
@@ -283,6 +281,10 @@ export default {
 								<Close :size="20" />
 							</template>
 						</NcButton>
+						<div class="modal-container__content">
+							<!-- @slot Modal content to render -->
+							<slot />
+						</div>
 					</div>
 
 					<!-- Navigation button -->
@@ -915,19 +917,24 @@ export default {
 	/* Content */
 	.modal-container {
 		position: relative;
-		display: block;
-		overflow: auto; // avoids unecessary hacks if the content should be bigger than the modal
+		display: flex;
 		padding: 0;
 		transition: transform 300ms ease;
 		border-radius: var(--border-radius-large);
 		background-color: var(--color-main-background);
 		color: var(--color-main-text);
 		box-shadow: 0 0 40px rgba(0, 0, 0, .2);
+
 		&__close {
 			position: absolute;
 			top: 4px;
 			right: 4px;
 		}
+
+		&__content {
+			width: 100%;
+			overflow: auto; // avoids unecessary hacks if the content should be bigger than the modal
+		}
 	}
 
 	// Sizing