diff --git a/dashboard/src/views/EmailSettingsView.vue b/dashboard/src/views/EmailSettingsView.vue
index 6ace723ec..cbe76ee6f 100644
--- a/dashboard/src/views/EmailSettingsView.vue
+++ b/dashboard/src/views/EmailSettingsView.vue
@@ -275,9 +275,9 @@ onMounted(async () => {
           <label for="maxEmailSizeInput">{{ $t('emails.settings.maxMailSize') }}</label>
           <div v-html="$t('emails.changeMailSizeDialog.description')"></div>
         </FormGroup>
-        <div style="display: flex; gap: 6px; align-items: center;">
+        <div style="display: flex; gap: 6px; align-items: center; flex-grow: 1;">
           {{ prettyDecimalSize(maxEmailSize) }}
-          <input style="width: 200px" type="range" id="maxEmailSizeInput" v-model="maxEmailSize" step="1000000" min="1000000" max="1000000000" :disabled="maxEmailSizeBusy" />
+          <input style="flex-grow: 1" type="range" id="maxEmailSizeInput" v-model="maxEmailSize" step="1000000" min="1000000" max="1000000000" :disabled="maxEmailSizeBusy" />
           <Button @click="onChangeMaxEmailSize()" tool :plain="currentMaxEmailSize !== maxEmailSize ? null : true" :loading="maxEmailSizeBusy" :disabled="maxEmailSizeBusy || currentMaxEmailSize === maxEmailSize">{{ $t('main.dialog.save') }}</Button>
         </div>
       </SettingsItem>