Use more grid over flexbox

CHANGELOG.md

@@ -12,6 +12,7 @@ All notable changes to this project will be documented in this file.
  - Add forced display mode to poll configuration
 ### Changed
  - Updated job control for the administration
+ - Refactored some elements flex to grid
 
 ## [8.5.0] - 2025-10-03
 ### Fixed

src/components/Base/modules/ConfigBox.vue

@@ -17,53 +17,44 @@ const { name, info = '', indented = false } = defineProps<Props>()
 
 <template>
 	<div class="config-box">
-		<div class="config-box__header">
-			<slot name="icon" />
-			<div :title="info" :class="['config-box__title', { indented }]">
-				{{ name }}
-				<InformationIcon v-if="info" />
-			</div>
-			<slot name="actions" />
+		<slot name="icon" />
+		<div :title="info" :class="['config-box__title', { indented }]">
+			{{ name }}
+			<InformationIcon v-if="info" />
 		</div>
+		<slot name="actions" />
 		<div class="config-box__container">
 			<slot />
 		</div>
 	</div>
 </template>
 
 <style lang="scss">
-.config-box__header {
-	display: flex;
-	align-content: center;
-	align-items: center;
-	gap: 5px;
-	margin: 8px 0 8px 0;
-}
-
 .config-box {
-	display: flex;
-	flex-direction: column;
-	padding: 8px 0;
-	.icon-container {
-		width: 20px;
-	}
-
-	.config-box__title {
-		display: flex;
-		flex: 1;
+	display: grid;
+	grid-template-columns: auto 1fr auto;
+	grid-template-areas:
+		'icon title actions'
+		'. container container';
+	column-gap: 0.5rem;
+	margin: 1rem 0;
+
+	&__title {
+		grid-area: title;
 		opacity: 0.7;
 		font-weight: bold;
-		margin: 0;
+		margin: 0.5rem 0;
 	}
 
-	.config-box__container {
-		display: flex;
-		flex-direction: column;
-		padding-inline-start: 24px;
+	&__container {
+		grid-area: container;
+		& > * {
+			width: 100%;
+		}
 	}
-}
 
-.indented {
-	margin-inline-start: 24px !important;
+	.indented {
+		margin-inline-start: 1.6rem !important;
+	}
 }
 </style>

src/components/Base/modules/FlexSettings.vue

@@ -4,22 +4,15 @@
 -->
 
 <template>
-	<div class="flex_settings">
+	<div class="grid_settings">
 		<slot name="default" />
 	</div>
 </template>
 
 <style lang="scss">
-.flex_settings {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: stretch;
-
-	.settings-section {
-		flex: 1 0 480px;
-		margin-bottom: 0;
-		border-bottom: 1px solid var(--color-border);
-	}
+.grid_settings {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(var(--cap-width), 1fr));
 }
 
 .settings-description {

src/components/Base/modules/StickyDiv.vue

@@ -59,87 +59,24 @@ const stickyClass = computed(() => ({
 
 <template>
 	<div :class="['sticky-div', stickyClass]" :style="style">
-		<div class="top-left-corner"></div>
-		<div class="top"></div>
-		<div class="top-right-corner"></div>
-
-		<div class="left"></div>
 		<div class="stage" :style="style">
 			<slot name="default">
 				<div class="inner"></div>
 			</slot>
 		</div>
-		<div class="right"></div>
-
-		<div class="bottom-right-corner"></div>
-		<div class="bottom"></div>
-		<div class="bottom-left-corner"></div>
 	</div>
 </template>
 
 <style lang="scss" scoped>
-.sticky-div {
-	display: grid;
-	grid-template-columns: auto 1fr auto;
-	grid-template-rows: auto 1fr auto;
-	grid-template-areas:
-		'top-left-corner top top-right-corner'
-		'left center right'
-		'bottom-left-corner bottom bottom-right-corner';
-}
-
 .stage {
+	display: grid;
 	padding: 0.3rem;
 	grid-area: center;
 	width: 100%;
 	height: 100%;
 	background-color: var(--color-main-background);
 }
 
-.top-left-corner {
-	grid-area: top-left-corner;
-	height: 0;
-	width: 0;
-}
-
-.top {
-	grid-area: top;
-	height: 0;
-}
-
-.top-right-corner {
-	grid-area: top-right-corner;
-	height: 0;
-	width: 0;
-}
-
-.right {
-	grid-area: right;
-	width: 0;
-}
-
-.bottom-right-corner {
-	grid-area: bottom-right-corner;
-	height: 0;
-	width: 0;
-}
-
-.bottom {
-	grid-area: bottom;
-	height: 0;
-}
-
-.bottom-left-corner {
-	grid-area: bottom-left-corner;
-	height: 0;
-	width: 0;
-}
-
-.left {
-	grid-area: left;
-	width: 0;
-}
-
 .sticky-left {
 	position: sticky;
 	inset-inline-start: 0;
@@ -150,20 +87,35 @@ const stickyClass = computed(() => ({
 	top: 0;
 }
 
-.bottom-right-corner,
-.bottom,
-.bottom-left-corner {
+.sticky-div.sticky-bottom-shadow::after {
+	content: '';
 	background: linear-gradient(
 		to bottom,
 		rgba(var(--color-box-shadow-rgb), 0.3),
 		rgba(var(--color-box-shadow-rgb), 0)
 	);
+	content: '';
+	position: absolute;
+	width: 100%;
+	height: 6px;
+	bottom: -6px;
+	left: 0px;
+	z-index: -1;
+}
 
-	transition:
-		all var(--animation-slow) linear,
-		border 1ms;
-	.sticky-bottom-shadow & {
-		height: var(--shadow-height);
-	}
+.sticky-div.sticky-right-shadow::after {
+	content: '';
+	background: linear-gradient(
+		to right,
+		rgba(var(--color-box-shadow-rgb), 0.3),
+		rgba(var(--color-box-shadow-rgb), 0)
+	);
+	content: '';
+	position: absolute;
+	height: 100%;
+	width: 6px;
+	right: -6px;
+	top: 0px;
+	z-index: -1;
 }
 </style>

src/components/Cards/VoteInfoCards.vue

@@ -78,21 +78,13 @@ const showRegisterCard = computed(
 
 <style lang="scss" scoped>
 .vote-info-cards {
-	// margin: auto;
-	display: flex;
+	display: grid;
 	gap: 1rem;
-	flex-wrap: wrap;
-	justify-content: center;
+	grid-template-columns: repeat(auto-fit, minmax(calc(var(--cap-width) / 2), 1fr));
 
-	& > * {
-		flex: 1;
-	}
-
-	// remove margin from notecard in favor of flexbox gap
+	// remove margin from notecard in favor of gap
 	.notecard {
 		margin: unset;
-		flex: 1 calc(var(--cap-width) / 2);
-		max-width: var(--cap-width);
 	}
 }
 </style>

src/components/Configuration/ConfigDangerArea.vue

@@ -96,9 +96,8 @@ function routeAway() {
 
 <style lang="scss">
 .delete-area {
-	display: flex;
+	display: grid;
 	gap: 8px;
-	justify-content: space-between;
-	flex-wrap: wrap;
+	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
 }
 </style>

src/components/Options/OptionItem.vue

@@ -69,6 +69,7 @@ const pollStore = usePollStore()
 	display: grid;
 	grid-template-columns: auto 1fr auto auto;
 	grid-template-areas: 'drag option owner actions';
+	align-items: center;
 	position: relative;
 	padding: 8px 0;
 	background-color: var(--color-main-background);

src/components/Options/OptionItemOwner.vue

@@ -33,7 +33,7 @@ const showDelete = computed(
 </script>
 
 <template>
-	<div class="option-item-owner blabla">
+	<div class="option-item-owner">
 		<ActionDelete
 			v-if="showDelete"
 			:name="
@@ -50,6 +50,7 @@ const showDelete = computed(
 			v-else-if="option.owner"
 			:user="option.owner"
 			:icon-size="avatarSize"
+			condensed
 			hide-names
 			:tooltip-message="
 				t('polls', '{displayName}\'s proposal', {

src/components/Options/OptionMenu.vue

@@ -10,6 +10,7 @@ import { t } from '@nextcloud/l10n'
 import NcActions from '@nextcloud/vue/components/NcActions'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcModal from '@nextcloud/vue/components/NcModal'
+import NcActionText from '@nextcloud/vue/components/NcActionText'
 
 import CloneDateIcon from 'vue-material-design-icons/CalendarMultiple.vue'
 import DeleteIcon from 'vue-material-design-icons/TrashCanOutline.vue'
@@ -55,6 +56,17 @@ const cloneAllowed = computed(
 		&& !pollStore.isClosed
 		&& pollStore.permissions.edit,
 )
+const proposalHint = computed(() => {
+	if (!option.owner || option.isOwner) {
+		return null
+	}
+
+	return option.owner
+		? t('polls', "{displayName}'s proposal", {
+				displayName: option.owner.displayName,
+			})
+		: ''
+})
 
 /**
  *
@@ -84,6 +96,8 @@ function confirmOption() {
 
 <template>
 	<NcActions class="option-menu">
+		<NcActionText v-if="proposalHint" :name="proposalHint" />
+
 		<NcActionButton
 			v-if="deleteAllowed"
 			:name="deleteOrRestoreStaticText"