nmc/5104-new-display-settings-design

css/apps/files.scss

@@ -1225,6 +1225,15 @@ table.files-filestable {
 	}
 }
 
+// Hide WebDAV, Warnings, and Keyboard shortcuts sections in Files settings
+.app-settings__content {
+	#settings-section_webdav,
+	#settings-section_warning,
+	#settings-section_shortcuts {
+		display: none;
+	}
+}
+
 // Deleted Files list table and header
 #app-content-vue {
 	.files-list__header {

css/apps/photos.scss

@@ -1273,7 +1273,7 @@
 	}
 
 	.app-settings-section {
-		margin-bottom: 2rem;
+		margin-bottom: 0;
 	}
 
 	#settings-section_layout-settings,
@@ -1285,6 +1285,16 @@
 // Device Sessions modal window
 #body-settings .modal-wrapper--small > .modal-container {
 	width: 550px;
+
+	@media screen and (max-width: $breakpoint-mobile-medium) {
+		width: 90vw;
+		max-width: 500px;
+	}
+
+	@media screen and (max-width: $breakpoint-mobile-small) {
+		width: 95vw;
+		max-width: none;
+	}
 }
 
 // Share Album modal window

css/components/nccheckbox.scss

@@ -102,8 +102,10 @@ span.checkbox-radio-switch-radio.checkbox-radio-switch, .checkbox-radio-switch-c
 	}
 
 	&--checked:not(&--disabled):focus-within .checkbox-radio-switch__label,
-	&--checked:not(&--disabled) .checkbox-radio-switch__label:hover {
-		background-color: initial;
+	&--checked:not(&--disabled) .checkbox-radio-switch__label:hover,
+	&--checked:not(&--disabled):focus-within .checkbox-radio-switch__content,
+	&--checked:not(&--disabled) .checkbox-radio-switch__content:hover {
+		background-color: var(--color-background-hover);
 	}
 
 	// override min-height of checkbox

css/layouts/modal.scss

@@ -8,22 +8,33 @@
  */
 
 @import '../_mixins.scss';
+@import '../_variables.scss';
 
 #body-user .dialog__modal {
 
     .modal-wrapper .modal-container {
         padding: 0;
 
         .dialog {
-            overflow: visible;
+            max-height: 80vh;
+            display: flex;
+            flex-direction: column;
 
             &__wrapper {
-                overflow: visible;
+                max-height: 80vh;
+                display: flex;
+                flex-direction: column;
+                overflow: hidden;
             }
 
             &__content {
-                overflow: visible;
+                overflow-y: auto;
                 padding-inline: 1.5rem;
+                padding-bottom: 1.5rem;
+
+                @media screen and (max-width: $breakpoint-mobile-small) {
+                    padding-inline: 1rem;
+                }
 
                 .button-vue--vue-secondary {
                     background: var(--nmc-ods-blue-primary);
@@ -66,14 +77,37 @@
                 }
 
                 .app-settings-section__name, .app-settings-section__content, .setting-section-subline, .photos-locations {
-                    margin: 0 0 0.75rem;
+                    margin: 0;
                 }
             }
         }
     }
 
     .modal-wrapper--large > .modal-container {
         width: 650px;
+
+        @media screen and (max-width: $breakpoint-mobile-medium) {
+            width: 90vw;
+            max-width: 600px;
+        }
+
+        @media screen and (max-width: $breakpoint-mobile-small) {
+            width: 95vw;
+            max-width: none;
+        }
+    }
+
+    .modal-container {
+        @media screen and (max-width: $breakpoint-mobile-small) {
+            margin: 1rem;
+        }
+
+        .dialog__name {
+            @media screen and (max-width: $breakpoint-mobile-small) {
+                font-size: 1.25rem;
+                padding: 1rem 1rem 0.5rem;
+            }
+        }
     }
 }
 

webpack.config.cjs

@@ -1,5 +1,6 @@
 // webpack with standard nextcloud config
 const path = require('path')
+const webpack = require('webpack')
 const webpackConfig = require('@nextcloud/webpack-vue-config')
 const webpackRules = require('@nextcloud/webpack-vue-config/rules')
 
@@ -29,4 +30,14 @@ webpackConfig.module.rules = Object.values(webpackRules)
 // Workaround for https://github.com/nextcloud/webpack-vue-config/pull/432 causing problems with nextcloud-vue-collections
 webpackConfig.resolve.alias = {}
 
+// Fix process is not defined error
+webpackConfig.plugins.push(
+	new webpack.DefinePlugin({
+		'process.env': '{}',
+		'process.version': '""',
+		'process.platform': '""',
+		'process.browser': 'true',
+	})
+)
+
 module.exports = webpackConfig