Some CSS optimizations

CHANGELOG.md

@@ -9,6 +9,10 @@ All notable changes to this project will be documented in this file.
 ### Fixed
  - Ordering options in text polls was broken
  - Menu showed invalid actions in text poll
+ - Restore lost max width of elements on vote page
+ - Limit height of large text options
+ - Expand large text options on hover and allow scrolling them
+ - Optimized ordering text polls with large text options
 
 ## [8.4.5] - 2025-09-04
 ### Fixed

src/App.vue

@@ -140,58 +140,5 @@ onUnmounted(() => {
 .app-content {
 	display: flex;
 	flex-direction: column;
-
-	.clamped {
-		display: -webkit-box !important;
-		-webkit-line-clamp: 2;
-		line-clamp: 2;
-		-webkit-box-orient: vertical;
-		text-wrap: wrap;
-		overflow: clip !important;
-		text-overflow: ellipsis !important;
-		padding: 0 !important;
-	}
-}
-
-// global modal settings
-.modal__content {
-	padding: 14px;
-	display: flex;
-	flex-direction: column;
-	color: var(--color-main-text);
-}
-
-.modal__buttons__spacer {
-	flex: 1;
-}
-
-.modal__buttons {
-	display: flex;
-	gap: 8px;
-	justify-content: flex-end;
-	flex-wrap: wrap-reverse;
-	align-items: center;
-	margin-top: 36px;
-
-	.left {
-		display: flex;
-		flex: 1;
-		gap: 8px;
-	}
-
-	.right {
-		display: flex;
-		flex: 0;
-		justify-content: flex-end;
-		gap: 8px;
-	}
-
-	.button {
-		margin-inline: 10px 0;
-	}
-}
-
-.modal__buttons__link {
-	text-decoration: underline;
 }
 </style>

src/assets/scss/globals.scss

@@ -7,3 +7,70 @@
 	inset-inline-start: 0;
 	z-index: 5;
 }
+
+.app-polls .clamped {
+	display: -webkit-box !important;
+	-webkit-line-clamp: 2;
+	line-clamp: 2;
+	-webkit-box-orient: vertical;
+	text-wrap: wrap;
+	overflow: clip !important;
+	text-overflow: ellipsis !important;
+	padding: 0 !important;
+}
+
+// global modal settings
+.modal__content {
+	padding: 14px;
+	display: flex;
+	flex-direction: column;
+	color: var(--color-main-text);
+}
+
+.modal__buttons__spacer {
+	flex: 1;
+}
+
+.modal__buttons {
+	display: flex;
+	gap: 8px;
+	justify-content: flex-end;
+	flex-wrap: wrap-reverse;
+	align-items: center;
+	margin-top: 36px;
+
+	.left {
+		display: flex;
+		flex: 1;
+		gap: 8px;
+	}
+
+	.right {
+		display: flex;
+		flex: 0;
+		justify-content: flex-end;
+		gap: 8px;
+	}
+
+	.button {
+		margin-inline: 10px 0;
+	}
+}
+
+.modal__buttons__link {
+	text-decoration: underline;
+}
+
+.sortable {
+	* {
+		cursor: grab;
+		&:active {
+			cursor: grabbing;
+		}
+	}
+
+	&:active {
+		cursor: -moz-grabbing;
+		cursor: -webkit-grabbing;
+	}
+}

src/assets/scss/vars.scss

@@ -2,35 +2,10 @@
  * SPDX-FileCopyrightText: 2020 René Gieling <github@dartcafe.de>
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-// :root {
-// 	// dark: #3b973b
-// 	// light: #2d7b41
-// 	--color-polls-foreground-yes: var(--color-success);
-// 	// dark: #ff3333
-// 	// light: #db0606
-// 	--color-polls-foreground-no: var(--color-error);
-// 	// dark: #ffcc00
-// 	// light: #a37200
-// 	--color-polls-foreground-maybe: var(--color-warning);
-// 	// dark: (59,151,59,0.2) #1e301e
-// 	// light: (45,123,65,0.2) #d5e5d9
-// 	--color-polls-background-yes: rgba(var(--color-success-rgb), 0.2);
-// 	// dark: (255,51,51,0.2) #451c1c
-// 	// light: (219,6,6,0.2) #f8cdcd
-// 	--color-polls-background-no: rgba(var(--color-error-rgb), 0.2);
-// 	// dark: (255,204,0,0.1) #2e2914
-// 	// light: (163,114,0,0.1) #f6f1e5
-// 	--color-polls-background-maybe: rgba(var(--color-warning-rgb), 0.1);
-// 	// dark: (0,174,255,0.1) #14262e
-// 	// light: (0,113,173,0.1) #e5f1f7
-// 	--container-background-light: rgba(var(--color-info-rgb), 0.1);
-// 	--cap-width: 49rem;
-// 	--shadow-height: 0.7rem;
-// 	--shadow-height-inverted: -0.7rem;
-// }
 
 :root,
 [data-theme-light] {
+	--cap-width: 49rem;
 	--color-polls-foreground-yes: #2d7b41;
 	--color-polls-foreground-no: #db0606;
 	--color-polls-foreground-maybe: #a37200;

src/components/Options/OptionItem.vue

@@ -22,7 +22,7 @@ interface Props {
 const { option, draggable = false, showOwner = false } = defineProps<Props>()
 
 const containerClass = {
-	'option-item-container': true,
+	'option-item': true,
 	deleted: option.deleted !== 0,
 	draggable,
 }
@@ -59,22 +59,34 @@ const pollStore = usePollStore()
 </template>
 
 <style lang="scss">
-.option-item-container {
+.option-item {
 	display: grid;
 	grid-template-columns: auto 1fr auto auto;
 	grid-template-areas: 'drag option owner actions';
 	position: relative;
 	padding: 8px 0;
 	background-color: var(--color-main-background);
+
 	.confirmed & {
 		background-color: var(--color-polls-background-yes);
 		border-radius: var(--border-radius-container);
 		border: 2px solid var(--color-success-text);
 	}
+
 	.list-view .confirmed & {
 		padding-inline: 0.5rem;
 		inset-inline-start: -0.5rem;
 	}
+
+	.side-bar-tab-options & {
+		border-bottom: 1px solid var(--color-border);
+
+		&:active,
+		&:hover {
+			transition: var(--background-dark) 0.3s ease;
+			background-color: var(--color-background-dark);
+		}
+	}
 }
 
 .grid-area-drag-icon {
@@ -116,17 +128,43 @@ const pollStore = usePollStore()
 }
 
 .option-item__option--text {
-	overflow: hidden;
+	overflow: clip;
 	text-overflow: ellipsis;
 	align-self: center;
 	text-wrap: balance;
 	hyphens: auto;
-
-	.table-view .option-item & {
+	display: -webkit-box !important;
+	line-clamp: 2;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+	max-height: 4em;
+	transition: all 0.3s ease-in-out;
+
+	.table-view & {
 		text-align: center;
-		/* Notice: https://caniuse.com/css-text-wrap-balance */
-		padding: 0 0.6em;
 		margin: auto;
+		-webkit-line-clamp: 6;
+		line-clamp: 6;
+		max-height: 12em;
+		padding: 0 0.6em;
+	}
+
+	/* Unclamp on hover or active, unless dragging */
+	:not(.sortable-chosen) & {
+		&:hover,
+		&:active {
+			-webkit-line-clamp: initial;
+			line-clamp: initial;
+			max-height: 30vh;
+			overflow-y: scroll;
+		}
+	}
+	.sortable-chosen & {
+		&:active {
+			-webkit-line-clamp: 2;
+			line-clamp: 2;
+			max-height: 6rem;
+		}
 	}
 
 	a {
@@ -138,32 +176,4 @@ const pollStore = usePollStore()
 .option-item__handle {
 	margin-inline-end: 0.5em;
 }
-
-.draggable {
-	* {
-		cursor: grab;
-		&:active {
-			cursor: grabbing;
-		}
-	}
-
-	&:active {
-		cursor: -moz-grabbing;
-		cursor: -webkit-grabbing;
-	}
-
-	.material-design-icon.draggable {
-		width: 0;
-		padding-inline-end: 0;
-		transition: all 0.3s ease-in-out;
-	}
-
-	&:active,
-	&:hover {
-		.material-design-icon.draggable {
-			width: initial;
-			padding-inline-end: 0.5px;
-		}
-	}
-}
 </style>

src/components/Options/OptionsText.vue

@@ -16,13 +16,12 @@ import OptionMenu from './OptionMenu.vue'
 
 const pollStore = usePollStore()
 const optionsStore = useOptionsStore()
-const element = useTemplateRef<HTMLElement>('list')
+// const element = useTemplateRef<HTMLElement>('list')
 
-const dragOptions = {
+useSortable(useTemplateRef<HTMLElement>('list'), optionsStore.options, {
 	animation: 200,
-	group: 'description',
+	group: 'options',
 	disabled: false,
-	ghostClass: 'ghost',
 	onUpdate: (e: { oldIndex: number; newIndex: number }) => {
 		onSort({ oldIndex: e.oldIndex, newIndex: e.newIndex })
 		// nextTick required here as moveArrayElement is executed in a microtask
@@ -31,9 +30,7 @@ const dragOptions = {
 			/* do nothing, wait for nextTick() */
 		})
 	},
-}
-
-useSortable(element, optionsStore.options, dragOptions)
+})
 
 const cssVar = {
 	'--content-deleted': `" (${t('polls', 'deleted')})"`,

src/components/SideBar/SideBarTabOptions.vue

@@ -121,40 +121,3 @@ onUnmounted(() => {
 		</ConfigBox>
 	</div>
 </template>
-
-<style lang="scss">
-.side-bar-tab-options {
-	.option-item {
-		border-bottom: 1px solid var(--color-border);
-
-		&:active,
-		&:hover {
-			transition: var(--background-dark) 0.3s ease;
-			background-color: var(--color-background-dark);
-		}
-		.option-item__option--text {
-			-webkit-line-clamp: 2;
-			line-clamp: 2;
-			max-height: 4em;
-			-webkit-box-orient: vertical;
-			display: -webkit-inline-box;
-			overflow: clip;
-			text-overflow: ellipsis;
-			transition: all 0.3s ease-in-out;
-		}
-	}
-
-	.sortable:not(.sortable-chosen) {
-		.option-item {
-			.option-item__option--text {
-				&:hover,
-				&:active {
-					-webkit-line-clamp: initial;
-					line-clamp: initial;
-					max-height: 12em;
-				}
-			}
-		}
-	}
-}
-</style>