From e031a8d42828f1aab49a57938a3d33b84fb1515a Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 5 Mar 2026 12:23:01 +0100
Subject: [PATCH] fix(migration): use Bulma select classes for dark mode
 compatibility

Wrap all <select> elements in Bulma's <div class="select"> wrapper
and remove custom scoped select styles. This fixes readability in
dark mode and ensures consistent styling with the rest of the app.
---
 frontend/src/views/migrate/MigrationCSV.vue | 83 ++++++++++-----------
 1 file changed, 41 insertions(+), 42 deletions(-)

diff --git a/frontend/src/views/migrate/MigrationCSV.vue b/frontend/src/views/migrate/MigrationCSV.vue
index 5d55cb412..df90fe5c8 100644
--- a/frontend/src/views/migrate/MigrationCSV.vue
+++ b/frontend/src/views/migrate/MigrationCSV.vue
@@ -49,35 +49,39 @@
 				<div class="options-grid">
 					<div class="option-group">
 						<label for="delimiter">{{ $t('migrate.csv.delimiter') }}</label>
-						<select
-							id="delimiter"
-							v-model="config.delimiter"
-							@change="updatePreview"
-						>
-							<option
-								v-for="delim in SUPPORTED_DELIMITERS"
-								:key="delim"
-								:value="delim"
+						<div class="select is-fullwidth">
+							<select
+								id="delimiter"
+								v-model="config.delimiter"
+								@change="updatePreview"
 							>
-								{{ getDelimiterLabel(delim) }}
-							</option>
-						</select>
+								<option
+									v-for="delim in SUPPORTED_DELIMITERS"
+									:key="delim"
+									:value="delim"
+								>
+									{{ getDelimiterLabel(delim) }}
+								</option>
+							</select>
+						</div>
 					</div>
 					<div class="option-group">
 						<label for="dateFormat">{{ $t('migrate.csv.dateFormat') }}</label>
-						<select
-							id="dateFormat"
-							v-model="config.date_format"
-							@change="updatePreview"
-						>
-							<option
-								v-for="format in SUPPORTED_DATE_FORMATS"
-								:key="format"
-								:value="format"
+						<div class="select is-fullwidth">
+							<select
+								id="dateFormat"
+								v-model="config.date_format"
+								@change="updatePreview"
 							>
-								{{ getDateFormatLabel(format) }}
-							</option>
-						</select>
+								<option
+									v-for="format in SUPPORTED_DATE_FORMATS"
+									:key="format"
+									:value="format"
+								>
+									{{ getDateFormatLabel(format) }}
+								</option>
+							</select>
+						</div>
 					</div>
 				</div>
 			</div>
@@ -100,18 +104,20 @@
 								{{ $t('migrate.csv.example') }}: {{ detectionResult.preview_rows[0][index] || '-' }}
 							</span>
 						</div>
-						<select
-							v-model="mapping.attribute"
-							@change="updatePreview"
-						>
-							<option
-								v-for="attr in TASK_ATTRIBUTES"
-								:key="attr"
-								:value="attr"
+						<div class="select is-fullwidth">
+							<select
+								v-model="mapping.attribute"
+								@change="updatePreview"
 							>
-								{{ getAttributeLabel(attr) }}
-							</option>
-						</select>
+								<option
+									v-for="attr in TASK_ATTRIBUTES"
+									:key="attr"
+									:value="attr"
+								>
+									{{ getAttributeLabel(attr) }}
+								</option>
+							</select>
+						</div>
 					</div>
 				</div>
 			</div>
@@ -417,13 +423,6 @@ function resetToUpload() {
 	label {
 		font-weight: 500;
 	}
-
-	select {
-		padding: 0.5rem;
-		border: 1px solid var(--grey-300);
-		border-radius: var(--border-radius);
-		background: var(--white);
-	}
 }
 
 .column-mappings {