fix(overview): uniform template card sizing, preview fallback, and mimeFallback param

Replace the ratio-based padding-bottom trick in TemplateSection with a
fixed 2/3 aspect-ratio so all categories (docs, sheets, presentations)
render at the same height. Switch .template-card__preview to flex
centering, removing the now-redundant absolute-position rule on the
blank card icon.

Add an @error handler that sets failedPreviews[fileid] so a broken
image falls back to the file-type icon without a broken-image glitch.
Use template.previewUrl when the API provides it, otherwise derive the
URL from the fileid.

In OfficeOverview, fix the preview URL to use mimeFallback=true
(boolean string) instead of mimeFallback=1, and update the loadState
key to match the renamed initial state ('overview_config').

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Signed-off-by: James Manuel <moodyjmz@users.noreply.github.com>

Author: moodyjmz

src/components/TemplateSection.vue

@@ -12,8 +12,7 @@
 			<!-- Blank file card -->
 			<li class="template-section__item">
 				<button class="template-card" @click="$emit('select', creator, null)">
-					<span class="template-card__preview template-card__preview--blank"
-						:style="previewStyle">
+					<span class="template-card__preview template-card__preview--blank">
 						<!-- eslint-disable-next-line vue/no-v-html -->
 						<span class="template-card__icon" v-html="creator.iconSvgInline" />
 					</span>
@@ -26,12 +25,14 @@
 				:key="template.fileid"
 				class="template-section__item">
 				<button class="template-card" @click="$emit('select', creator, template)">
-					<span class="template-card__preview" :style="previewStyle">
-						<img v-if="template.hasPreview"
+					<span class="template-card__preview">
+						<img v-if="template.hasPreview && !failedPreviews[template.fileid]"
 							:src="templatePreviewUrl(template)"
 							:alt="nameWithoutExt(template.basename)"
 							loading="lazy"
-							class="template-card__image">
+							class="template-card__image"
+							@error="failedPreviews = { ...failedPreviews, [template.fileid]: true }">
+						<!-- eslint-disable-next-line vue/no-v-html -->
 						<span v-else class="template-card__icon" v-html="creator.iconSvgInline" />
 					</span>
 					<span class="template-card__name">{{ nameWithoutExt(template.basename) }}</span>
@@ -56,13 +57,10 @@ export default {
 
 	emits: ['select'],
 
-	computed: {
-		previewStyle() {
-			if (!this.creator.ratio) {
-				return {}
-			}
-			return { paddingBottom: `${(1 / this.creator.ratio) * 100}%` }
-		},
+	data() {
+		return {
+			failedPreviews: {},
+		}
 	},
 
 	methods: {
@@ -130,18 +128,15 @@ export default {
 .template-card__preview {
 	position: relative;
 	width: 100%;
+	aspect-ratio: 2 / 3;
 	overflow: hidden;
 	border: 2px solid var(--color-border);
 	border-radius: var(--border-radius-large);
 	background-color: var(--color-main-background);
 	box-sizing: border-box;
-}
-
-.template-card__preview--blank .template-card__icon {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
 .template-card__image {

src/views/OfficeOverview.vue

@@ -180,7 +180,7 @@ export default {
 			loading: false,
 			error: null,
 			previewEnabled: loadState('richdocuments', 'previewEnabled', false),
-			viewMode: loadState('richdocuments', 'config', {}).overview_grid_view ? 'grid' : 'list',
+			viewMode: loadState('richdocuments', 'overview_config', {}).overview_grid_view ? 'grid' : 'list',
 			searchQuery: '',
 			showCreateDialog: false,
 			newFileName: '',
@@ -237,7 +237,7 @@ export default {
 
 		getPreviewUrl(file) {
 			const etag = (file.attributes?.etag || '').slice(0, 6)
-			return generateUrl('/core/preview?fileId={fileid}&x={x}&y={y}&v={v}&a=1&mimeFallback=1', {
+			return generateUrl('/core/preview?fileId={fileid}&x={x}&y={y}&v={v}&a=1&mimeFallback=true', {
 				fileid: file.fileid,
 				x: 300,
 				y: 300,