fix: Limit max width of text columns and properly style them

Signed-off-by: Julius Härtl <jus@bitgrid.net>
nextcloud · Feb 29, 2024 · d5c2188 · d5c2188
1 parent 12455fd
commit d5c2188
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/src/shared/components/ncTable/partials/TableCellEditor.vue b/src/shared/components/ncTable/partials/TableCellEditor.vue
@@ -33,9 +33,10 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 
 div {
+	max-width: 670px;
 	max-height: calc(var(--default-line-height) * 6);
 	overflow-y: scroll;
 	min-width: 100px;
@@ -44,10 +45,20 @@ div {
 }
 
 :deep(.text-editor__wrapper div.ProseMirror) {
-	padding: 0px 0px 0px 0px
+	padding: 0px 0px 0px 0px;
+
+}
+
+:deep(div[contenteditable='false']) {
+	background: transparent;
+	color: var(--color-main-text);
+	width: auto;
+	min-height: auto;
+	opacity: 1;
+	font-size: var(--default-font-size);
 }
 
 :deep(.editor__content) {
-	max-width: 100% !important
+	max-width: 100% !important;
 }
 </style>
diff --git a/src/shared/components/ncTable/sections/CustomTable.vue b/src/shared/components/ncTable/sections/CustomTable.vue
@@ -299,6 +299,7 @@ export default {
 
 	td, th {
 		padding-right: 8px;
+		max-width: 500px;
 	}
 
 	td .showOnHover, th .showOnHover {