From 276977287764960ede33212e28d1accbb506321c Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 7 Mar 2026 11:47:34 +0000
Subject: [PATCH] Make form column layout configurable with global Twig
 variables

Co-authored-by: jbtronics <5410681+jbtronics@users.noreply.github.com>
---
 config/packages/twig.yaml                      |  4 ++++
 templates/admin/_delete_form.html.twig         |  2 +-
 templates/admin/_export_form.html.twig         |  2 +-
 templates/admin/base_admin.html.twig           |  4 ++--
 templates/admin/category_admin.html.twig       |  6 +++---
 templates/admin/footprint_admin.html.twig      |  2 +-
 templates/admin/label_profile_admin.html.twig  |  2 +-
 templates/admin/project_admin.html.twig        |  4 ++--
 templates/admin/storelocation_admin.html.twig  |  2 +-
 templates/attachment_list.html.twig            |  2 +-
 .../form/collection_types_layout.html.twig     |  4 ++--
 .../form/extended_bootstrap_layout.html.twig   |  4 ++--
 .../search/part_search.html.twig               |  2 +-
 .../settings/provider_settings.html.twig       |  4 ++--
 templates/label_system/dialog.html.twig        | 14 +++++++-------
 .../label_system/scanner/scanner.html.twig     |  2 +-
 templates/log_system/log_list.html.twig        |  2 +-
 templates/parts/edit/_eda.html.twig            |  4 ++--
 templates/parts/edit/_main.html.twig           |  2 +-
 .../parts/edit/edit_form_styles.html.twig      |  4 ++--
 templates/parts/edit/edit_part_info.html.twig  |  2 +-
 templates/parts/import/parts_import.html.twig  |  2 +-
 .../parts/info/_stocktake_modal.html.twig      | 16 ++++++++--------
 templates/parts/info/_withdraw_modal.html.twig | 18 +++++++++---------
 templates/parts/lists/_filter.html.twig        |  2 +-
 templates/settings/settings.html.twig          |  2 +-
 templates/users/_2fa_settings.html.twig        | 18 +++++++++---------
 templates/users/user_settings.html.twig        |  2 +-
 28 files changed, 69 insertions(+), 65 deletions(-)

diff --git a/config/packages/twig.yaml b/config/packages/twig.yaml
index 95ae4f3b..182f12ec 100644
--- a/config/packages/twig.yaml
+++ b/config/packages/twig.yaml
@@ -17,6 +17,10 @@ twig:
         available_themes: '%partdb.available_themes%'
         saml_enabled: '%partdb.saml.enabled%'
         part_preview_generator: '@App\Services\Attachments\PartPreviewGenerator'
+        # Bootstrap grid classes used for horizontal form layouts
+        form_label_col_class: 'col-sm-3 col-lg-2'
+        form_input_col_class: 'col-sm-9 col-lg-10'
+        form_offset_col_class: 'offset-sm-3 offset-lg-2'
 
 when@test:
     twig:
diff --git a/templates/admin/_delete_form.html.twig b/templates/admin/_delete_form.html.twig
index fd653256..86778f7a 100644
--- a/templates/admin/_delete_form.html.twig
+++ b/templates/admin/_delete_form.html.twig
@@ -5,7 +5,7 @@
     <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ entity.id) }}">
     <div class="form-group">
         <div class=""></div>
-        <div class="col-sm offset-sm-3 ps-2">
+        <div class="col-sm {{ form_offset_col_class }} ps-2">
             {% set delete_disabled = (not is_granted("delete", entity)) or (entity.group is defined and entity.id == 1) or entity == app.user %}
             <div class="btn-group">
                 <button class="btn btn-danger" {% if delete_disabled %}disabled{% endif %}>{% trans %}entity.delete{% endtrans %}</button>
diff --git a/templates/admin/_export_form.html.twig b/templates/admin/_export_form.html.twig
index 07b00d43..20b4505e 100644
--- a/templates/admin/_export_form.html.twig
+++ b/templates/admin/_export_form.html.twig
@@ -35,7 +35,7 @@
     </div>
 
     <div class="row mt-2">
-        <div class="offset-sm-3 col-sm">
+        <div class="{{ form_offset_col_class }} col-sm">
             <button type="submit" class="btn btn-primary">{% trans %}export.btn{% endtrans %}</button>
         </div>
     </div>
diff --git a/templates/admin/base_admin.html.twig b/templates/admin/base_admin.html.twig
index f710981d..b1298a50 100644
--- a/templates/admin/base_admin.html.twig
+++ b/templates/admin/base_admin.html.twig
@@ -129,7 +129,7 @@
                                 </div>
 
                                 <div class="form-group row">
-                                    <div class="col-sm-9 offset-sm-3">
+                                    <div class="{{ form_input_col_class }} {{ form_offset_col_class }}">
                                         <div class="btn-group">
                                             {{ form_widget(form.save) }}
                                             <button type="button" class="btn {% if entity.id is not null %}btn-primary{% else %}btn-success{% endif %} dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@@ -186,7 +186,7 @@
 
                                 <div id="mass_creation" class="tab-pane fade">
                                     <div class="row">
-                                        <p class="text-muted offset-sm-3 col-sm-9">{% trans %}mass_creation.help{% endtrans %}</p>
+                                        <p class="text-muted {{ form_offset_col_class }} {{ form_input_col_class }}">{% trans %}mass_creation.help{% endtrans %}</p>
                                     </div>
                                     {{ form(mass_creation_form) }}
                                 </div>
diff --git a/templates/admin/category_admin.html.twig b/templates/admin/category_admin.html.twig
index 3ddc1472..bdf282f5 100644
--- a/templates/admin/category_admin.html.twig
+++ b/templates/admin/category_admin.html.twig
@@ -41,13 +41,13 @@
         {{ form_row(form.eda_info.reference_prefix) }}
 
         <div class="row">
-            <div class="col-sm-9 offset-sm-3">
+            <div class="{{ form_input_col_class }} {{ form_offset_col_class }}">
                 {{ form_row(form.eda_info.visibility) }}
             </div>
         </div>
 
         <div class="row mb-2">
-            <div class="col-sm-9 offset-sm-3">
+            <div class="{{ form_input_col_class }} {{ form_offset_col_class }}">
                 {{ form_widget(form.eda_info.exclude_from_bom) }}
                 {{ form_widget(form.eda_info.exclude_from_board) }}
                 {{ form_widget(form.eda_info.exclude_from_sim) }}
@@ -55,7 +55,7 @@
         </div>
 
         <div class="row">
-            <div class="col-sm-9 offset-sm-3">
+            <div class="{{ form_input_col_class }} {{ form_offset_col_class }}">
                 <h6>{% trans %}eda_info.kicad_section.title{% endtrans %}:</h6>
             </div>
         </div>
diff --git a/templates/admin/footprint_admin.html.twig b/templates/admin/footprint_admin.html.twig
index 1ed39e9f..0e1b13dc 100644
--- a/templates/admin/footprint_admin.html.twig
+++ b/templates/admin/footprint_admin.html.twig
@@ -28,7 +28,7 @@
 {% block additional_panes %}
     <div class="tab-pane" id="eda">
         <div class="row">
-            <div class="col-sm-9 offset-sm-3">
+            <div class="{{ form_input_col_class }} {{ form_offset_col_class }}">
                 <h6>{% trans %}eda_info.kicad_section.title{% endtrans %}:</h6>
             </div>
         </div>
diff --git a/templates/admin/label_profile_admin.html.twig b/templates/admin/label_profile_admin.html.twig
index 8702b18a..df4f358a 100644
--- a/templates/admin/label_profile_admin.html.twig
+++ b/templates/admin/label_profile_admin.html.twig
@@ -27,7 +27,7 @@
     {{ form_row(form.options.supported_element) }}
     <div class="mb-2 row">
         {{ form_label(form.options.width) }}
-        <div class="col-sm-9">
+        <div class="{{ form_input_col_class }}">
             <div class="input-group">
                 {{ form_widget(form.options.width) }}
 
diff --git a/templates/admin/project_admin.html.twig b/templates/admin/project_admin.html.twig
index d199b63c..696a5841 100644
--- a/templates/admin/project_admin.html.twig
+++ b/templates/admin/project_admin.html.twig
@@ -31,8 +31,8 @@
     {{ form_row(form.status) }}
     {% if entity.id %}
         <div class="mb-2 row">
-            <label class="col-form-label col-sm-3">{% trans %}project.edit.associated_build_part{% endtrans %}</label>
-            <div class="col-sm-9">
+            <label class="col-form-label {{ form_label_col_class }}">{% trans %}project.edit.associated_build_part{% endtrans %}</label>
+            <div class="{{ form_input_col_class }}">
                 {% if entity.buildPart %}
                     <span class="form-control-static"><a href="{{ entity_url(entity.buildPart) }}">{{ entity.buildPart.name }}</a></span>
                 {% else %}
diff --git a/templates/admin/storelocation_admin.html.twig b/templates/admin/storelocation_admin.html.twig
index b01ecc73..21342918 100644
--- a/templates/admin/storelocation_admin.html.twig
+++ b/templates/admin/storelocation_admin.html.twig
@@ -8,7 +8,7 @@
 {% block additional_controls %}
     {% if entity.id %}
         <div class="row form-group">
-            <div class="offset-sm-3 col-sm-9">
+            <div class="{{ form_offset_col_class }} {{ form_input_col_class }}">
                 {{ dropdown.profile_dropdown('storelocation', entity.id) }}
             </div>
         </div>
diff --git a/templates/attachment_list.html.twig b/templates/attachment_list.html.twig
index 3ff45700..e4371282 100644
--- a/templates/attachment_list.html.twig
+++ b/templates/attachment_list.html.twig
@@ -44,7 +44,7 @@
                     {{ form_row(filterForm.discard) }}
 
                     <div class="row mb-3">
-                        <div class="col-sm-9 offset-sm-3">
+                        <div class="{{ form_input_col_class }} {{ form_offset_col_class }}">
                             <button type="button" class="btn btn-danger" {{ stimulus_action('helpers/form_cleanup', 'clearAll') }}>{% trans %}filter.clear_filters{% endtrans %}</button>
                         </div>
                     </div>
diff --git a/templates/form/collection_types_layout.html.twig b/templates/form/collection_types_layout.html.twig
index 96b71bf0..d245df5c 100644
--- a/templates/form/collection_types_layout.html.twig
+++ b/templates/form/collection_types_layout.html.twig
@@ -63,8 +63,8 @@
             <div class="">
                 {{ form_row(form.mountnames) }}
                 <div class="row mb-2">
-                    <label class="col-form-label col-sm-3">{% trans %}project.bom.price{% endtrans %}</label>
-                    <div class="col-sm-9">
+                    <label class="col-form-label {{ form_label_col_class }}">{% trans %}project.bom.price{% endtrans %}</label>
+                    <div class="{{ form_input_col_class }}">
                         <div class="input-group">
                             {{ form_widget(form.price) }}
                             {{ form_widget(form.priceCurrency) }}
diff --git a/templates/form/extended_bootstrap_layout.html.twig b/templates/form/extended_bootstrap_layout.html.twig
index 1227750c..bc16b437 100644
--- a/templates/form/extended_bootstrap_layout.html.twig
+++ b/templates/form/extended_bootstrap_layout.html.twig
@@ -17,11 +17,11 @@
 
 
 {% block form_label_class -%}
-    col-sm-3
+    {{ form_label_col_class }}
 {%- endblock form_label_class %}
 
 {% block form_group_class -%}
-    col-sm-9
+    {{ form_input_col_class }}
 {%- endblock form_group_class %}
 
 {% block si_unit_widget %}
diff --git a/templates/info_providers/search/part_search.html.twig b/templates/info_providers/search/part_search.html.twig
index a5602618..0943716d 100644
--- a/templates/info_providers/search/part_search.html.twig
+++ b/templates/info_providers/search/part_search.html.twig
@@ -28,7 +28,7 @@
     {{ form_row(form.providers) }}
 
     <div class="row mb-2">
-        <div class="col-sm-9 offset-sm-3">
+        <div class="{{ form_input_col_class }} {{ form_offset_col_class }}">
             <a href="{{ path('info_providers_list') }}">{% trans %}info_providers.search.info_providers_list{% endtrans %}</a>
         </div>
     </div>
diff --git a/templates/info_providers/settings/provider_settings.html.twig b/templates/info_providers/settings/provider_settings.html.twig
index 86e5bc9b..b5ba1bf9 100644
--- a/templates/info_providers/settings/provider_settings.html.twig
+++ b/templates/info_providers/settings/provider_settings.html.twig
@@ -8,7 +8,7 @@
 {% block card_title %}<i class="fa-solid fa-gear fa-fw"></i> {% trans %}info_providers.settings.title{% endtrans %}: <b>{{ info_provider_info.name }}</b>{% endblock %}
 
 {% block card_content %}
-    <div class="offset-sm-3">
+    <div class="{{ form_offset_col_class }}">
         <h3>
             {% if info_provider_info.url is defined %}
                 <a href="{{ info_provider_info.url }}" class="link-external" target="_blank" rel="nofollow">{{ info_provider_info.name }}</a>
@@ -23,7 +23,7 @@
 
     {{ form_start(form) }}
     <div class="row">
-        <div class="offset-sm-3 col mb-3 ps-2">
+        <div class="{{ form_offset_col_class }} col mb-3 ps-2">
             <b>{{ form_help(form) }}</b>
         </div>
     </div>
diff --git a/templates/label_system/dialog.html.twig b/templates/label_system/dialog.html.twig
index 11877a4c..38c42960 100644
--- a/templates/label_system/dialog.html.twig
+++ b/templates/label_system/dialog.html.twig
@@ -36,7 +36,7 @@
             {{ form_row(form.options.supported_element) }}
             <div class="mb-2 row">
                 {{ form_label(form.options.width) }}
-                <div class="col-sm-9">
+                <div class="{{ form_input_col_class }}">
                     <div class="input-group">
                         {{ form_widget(form.options.width) }}
 
@@ -59,8 +59,8 @@
 
         <div class="tab-pane" id="profiles" role="tabpanel" aria-labelledby="profiles-tab">
             <div class="form-group row">
-                <label class="col-sm-3 col-form-label">{% trans %}label_generator.selected_profile{% endtrans %}</label>
-                <div class="col-sm-9">
+                <label class="{{ form_label_col_class }} col-form-label">{% trans %}label_generator.selected_profile{% endtrans %}</label>
+                <div class="{{ form_input_col_class }}">
                     <span class="form-control-plaintext">{{ profile.name ?? '-' }}
                         {% if profile and is_granted("edit", profile) %}
                             <a href="{{ entity_url(profile, 'edit') }}" title="{% trans %}label_generator.edit_profile{% endtrans %}"
@@ -71,7 +71,7 @@
             </div>
 
             <div class="form-group row">
-                <div class="offset-sm-3 col-sm-9">
+                <div class="{{ form_offset_col_class }} {{ form_input_col_class }}">
                     <div class="dropdown">
                         <button class="btn btn-info dropdown-toggle" type="button" id="loadProfilesButton"
                                 {% if not is_granted("@labels.create_labels") %}disabled{% endif %}
@@ -97,7 +97,7 @@
 
             {% if is_granted("@labels.read_profiles") %}
                 <div class="form-group row">
-                    <div class="offset-sm-3 col-sm-9">
+                    <div class="{{ form_offset_col_class }} {{ form_input_col_class }}">
                         <a class="btn btn-link" href="{{ path('label_profile_new') }}">{% trans %}label_generator.edit_profiles{% endtrans %}</a>
                     </div>
                 </div>
@@ -108,7 +108,7 @@
             {% endif %}
 
             <div class="form-group row">
-                <div class="offset-sm-3 col-sm-9">
+                <div class="{{ form_offset_col_class }} {{ form_input_col_class }}">
                     <div class="input-group">
                         {{ form_widget(form.save_profile_name) }}
                         {{ form_widget(form.save_profile) }}
@@ -124,7 +124,7 @@
     {{ form_end(form) }}
     {% if pdf_data %}
         <div class="row">
-            <div class="col-sm-9 offset-sm-3">
+            <div class="{{ form_input_col_class }} {{ form_offset_col_class }}">
                 <a data-turbo="false" class="btn btn-secondary" href="#" {{ stimulus_controller('pages/label_download_btn')}} {{ stimulus_action('pages/label_download_btn', 'download')}} download="{{ filename ?? '' }}">
                     {% trans %}label_generator.download{% endtrans %}
                 </a>
diff --git a/templates/label_system/scanner/scanner.html.twig b/templates/label_system/scanner/scanner.html.twig
index f9b51388..0c8579de 100644
--- a/templates/label_system/scanner/scanner.html.twig
+++ b/templates/label_system/scanner/scanner.html.twig
@@ -9,7 +9,7 @@
 
     <div class="">
         <div class="form-group row">
-            <div class="offset-sm-3 col-sm-9">
+            <div class="{{ form_offset_col_class }} {{ form_input_col_class }}">
                 <div class="img-thumbnail" style="max-width: 600px;">
                     <div id="reader-box" {{ stimulus_controller('pages/barcode_scan') }}></div>
                 </div>
diff --git a/templates/log_system/log_list.html.twig b/templates/log_system/log_list.html.twig
index d2d8c479..609342b7 100644
--- a/templates/log_system/log_list.html.twig
+++ b/templates/log_system/log_list.html.twig
@@ -40,7 +40,7 @@
                     {{ form_row(filterForm.discard) }}
 
                     <div class="row mb-3">
-                        <div class="col-sm-9 offset-sm-3">
+                        <div class="{{ form_input_col_class }} {{ form_offset_col_class }}">
                             <button type="button" class="btn btn-danger" {{ stimulus_action('helpers/form_cleanup', 'clearAll') }}>{% trans %}filter.clear_filters{% endtrans %}</button>
                         </div>
                     </div>
diff --git a/templates/parts/edit/_eda.html.twig b/templates/parts/edit/_eda.html.twig
index 1383871e..26bbf544 100644
--- a/templates/parts/edit/_eda.html.twig
+++ b/templates/parts/edit/_eda.html.twig
@@ -4,7 +4,7 @@
 {{ form_row(form.eda_info.visibility) }}
 
 <div class="row mb-2">
-    <div class="col-sm-9 offset-sm-3">
+    <div class="{{ form_input_col_class }} {{ form_offset_col_class }}">
         {{ form_widget(form.eda_info.exclude_from_bom) }}
         {{ form_widget(form.eda_info.exclude_from_board) }}
         {{ form_widget(form.eda_info.exclude_from_sim) }}
@@ -12,7 +12,7 @@
 </div>
 
 <div class="row">
-    <div class="col-sm-9 offset-sm-3">
+    <div class="{{ form_input_col_class }} {{ form_offset_col_class }}">
         <h6>{% trans %}eda_info.kicad_section.title{% endtrans %}:</h6>
     </div>
 </div>
diff --git a/templates/parts/edit/_main.html.twig b/templates/parts/edit/_main.html.twig
index f153d878..6a17bf30 100644
--- a/templates/parts/edit/_main.html.twig
+++ b/templates/parts/edit/_main.html.twig
@@ -1,7 +1,7 @@
 {{ form_row(form.name) }}
 {% if part.category is not null and part.category.partnameHint is not empty %}
     <div class="row">
-        <div class="col-sm-9 offset-sm-3">
+        <div class="{{ form_input_col_class }} {{ form_offset_col_class }}">
             <p class="form-text help-text"><b>{% trans %}part.edit.name.category_hint{% endtrans %}:</b> {{ part.category.partnameHint }}</p>
         </div>
     </div>
diff --git a/templates/parts/edit/edit_form_styles.html.twig b/templates/parts/edit/edit_form_styles.html.twig
index 9e989c92..8a1b7374 100644
--- a/templates/parts/edit/edit_form_styles.html.twig
+++ b/templates/parts/edit/edit_form_styles.html.twig
@@ -107,7 +107,7 @@
 
             {% set id = 'collapse_' ~ random() %}
 
-            <a class="btn btn-link offset-sm-3 btn-sm" data-bs-toggle="collapse" href="#{{ id }}" role="button" aria-expanded="false" aria-controls="{{ id }}">
+            <a class="btn btn-link {{ form_offset_col_class }} btn-sm" data-bs-toggle="collapse" href="#{{ id }}" role="button" aria-expanded="false" aria-controls="{{ id }}">
                 {% trans %}part_lot.edit.advanced{% endtrans %}
             </a>
             <div class="collapse" id="{{ id }}">
@@ -142,7 +142,7 @@
 
             <div class="mb-2 row">
                 {{ form_label(form.file) }}
-                <div class="col-sm-9">
+                <div class="{{ form_input_col_class }}">
                     {{ form_widget(form.file) }}
                     {{ form_errors(form.file) }}
                     <small class="text-muted">{% trans %}attachment.max_file_size{% endtrans %}: {{ max_upload_size | format_bytes }}</small>
diff --git a/templates/parts/edit/edit_part_info.html.twig b/templates/parts/edit/edit_part_info.html.twig
index 28a88132..588e67da 100644
--- a/templates/parts/edit/edit_part_info.html.twig
+++ b/templates/parts/edit/edit_part_info.html.twig
@@ -140,7 +140,7 @@
     </div>
 
     <div class="form-group row">
-        <div class="col-sm-9 offset-sm-3">
+        <div class="{{ form_input_col_class }} {{ form_offset_col_class }}">
             <div class="btn-group">
                 {{ form_widget(form.save) }}
                 <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
diff --git a/templates/parts/import/parts_import.html.twig b/templates/parts/import/parts_import.html.twig
index 794b6886..a65998b3 100644
--- a/templates/parts/import/parts_import.html.twig
+++ b/templates/parts/import/parts_import.html.twig
@@ -25,7 +25,7 @@
 {% endblock %}
 
 {% block card_content %}
-    <p class="text-muted offset-sm-3">
+    <p class="text-muted {{ form_offset_col_class }}">
         {% trans %}parts.import.help{% endtrans %}<br>
         {% trans with {'%link%': 'https://docs.part-db.de/usage/import_export.html'} %}parts.import.help_documentation{% endtrans %}
     </p>
diff --git a/templates/parts/info/_stocktake_modal.html.twig b/templates/parts/info/_stocktake_modal.html.twig
index 5e8c1ae5..a0d2646c 100644
--- a/templates/parts/info/_stocktake_modal.html.twig
+++ b/templates/parts/info/_stocktake_modal.html.twig
@@ -13,39 +13,39 @@
                     <input type="hidden" name="_redirect" value="{{  uri_without_host(app.request) }}">
 
                     <div class="row mb-2">
-                        <label class="col-form-label col-sm-3">
+                        <label class="col-form-label {{ form_label_col_class }}">
                             {% trans %}part.info.stocktake_modal.expected_amount{% endtrans %}
                         </label>
-                        <div class="col-sm-9">
+                        <div class="{{ form_input_col_class }}">
                             <span id="stocktake-modal-expected-amount" class="form-control-plaintext">0</span>
                         </div>
                     </div>
 
                     <div class="row mb-2">
-                        <label class="col-form-label col-sm-3">
+                        <label class="col-form-label {{ form_label_col_class }}">
                             {% trans %}part.info.stocktake_modal.actual_amount{% endtrans %}
                         </label>
-                        <div class="col-sm-9">
+                        <div class="{{ form_input_col_class }}">
                             <input type="number" required class="form-control" min="0" step="{{ (part.partUnit and not part.partUnit.integer) ? 'any' : '1' }}" name="actual_amount" value="">
                         </div>
                     </div>
 
 
                     <div class="row mb-2">
-                        <label class="col-form-label col-sm-3">
+                        <label class="col-form-label {{ form_label_col_class }}">
                             {% trans %}part.info.withdraw_modal.comment{% endtrans %}
                         </label>
-                        <div class="col-sm-9">
+                        <div class="{{ form_input_col_class }}">
                             <input type="text" class="form-control" name="comment" value="">
                             <div class="form-text">{% trans %}part.info.withdraw_modal.comment.hint{% endtrans %}</div>
                         </div>
                     </div>
 
                     <div class="row mb-2">
-                        <label class="col-form-label col-sm-3">
+                        <label class="col-form-label {{ form_label_col_class }}">
                             {% trans %}part.info.withdraw_modal.timestamp{% endtrans %}
                         </label>
-                        <div class="col-sm-9">
+                        <div class="{{ form_input_col_class }}">
                             {# The timestamp must be between a year ago and 1 hour in the future #}
                             <input type="datetime-local" class="form-control" name="timestamp" value=""
                                    max="{{ "+10mins"|date('Y-m-d\\TH:i') }}" min="{{ "-1year"|date('Y-m-d\\TH:i') }}">
diff --git a/templates/parts/info/_withdraw_modal.html.twig b/templates/parts/info/_withdraw_modal.html.twig
index e0491d9c..b82e6218 100644
--- a/templates/parts/info/_withdraw_modal.html.twig
+++ b/templates/parts/info/_withdraw_modal.html.twig
@@ -18,17 +18,17 @@
                     <input type="hidden" name="_redirect" value="{{  uri_without_host(app.request) }}">
 
                     <div class="row mb-2">
-                        <label class="col-form-label col-sm-3">
+                        <label class="col-form-label {{ form_label_col_class }}">
                             {% trans %}part.info.withdraw_modal.amount{% endtrans %}
                         </label>
-                        <div class="col-sm-9">
+                        <div class="{{ form_input_col_class }}">
                             <input type="number" required class="form-control" min="0" step="{{ (part.partUnit and not part.partUnit.integer) ? 'any' : '1' }}" name="amount" value="">
                         </div>
                     </div>
 
                     <div class="row mb-2 d-none" id="withdraw-modal-move-to">
-                        <label class="col-form-label col-sm-3">{% trans %}part.info.withdraw_modal.move_to{% endtrans %}</label>
-                        <div class="col-sm-9">
+                        <label class="col-form-label {{ form_label_col_class }}">{% trans %}part.info.withdraw_modal.move_to{% endtrans %}</label>
+                        <div class="{{ form_input_col_class }}">
                             {% for lots in part.partLots|filter(l => l.instockUnknown == false) %}
 
                                 <div class="form-check">
@@ -42,20 +42,20 @@
                     </div>
 
                     <div class="row mb-2">
-                        <label class="col-form-label col-sm-3">
+                        <label class="col-form-label {{ form_label_col_class }}">
                             {% trans %}part.info.withdraw_modal.comment{% endtrans %}
                         </label>
-                        <div class="col-sm-9">
+                        <div class="{{ form_input_col_class }}">
                             <input type="text" class="form-control" name="comment" value="" {% if event_comment_needed('part_stock_operation') %}required{% endif %}>
                             <div id="emailHelp" class="form-text">{% trans %}part.info.withdraw_modal.comment.hint{% endtrans %}</div>
                         </div>
                     </div>
 
                     <div class="row mb-2">
-                        <label class="col-form-label col-sm-3">
+                        <label class="col-form-label {{ form_label_col_class }}">
                             {% trans %}part.info.withdraw_modal.timestamp{% endtrans %}
                         </label>
-                        <div class="col-sm-9">
+                        <div class="{{ form_input_col_class }}">
                             {# The timestamp must be between a year ago and 1 hour in the future #}
                             <input type="datetime-local" class="form-control" name="timestamp" value=""
                                    max="{{ "+10mins"|date('Y-m-d\\TH:i') }}" min="{{ "-1year"|date('Y-m-d\\TH:i') }}">
@@ -64,7 +64,7 @@
                     </div>
 
                     <div class="row mb-2">
-                        <div class="col-sm-9 offset-sm-3">
+                        <div class="{{ form_input_col_class }} {{ form_offset_col_class }}">
                             {# The timestamp must be between a year ago and 1 hour in the future #}
                             <div class="form-check">
                                 <input class="form-check-input" type="checkbox" name="delete_lot_if_empty" value="true" id="withdraw_modal_delete_if_empty">
diff --git a/templates/parts/lists/_filter.html.twig b/templates/parts/lists/_filter.html.twig
index 3130f379..983c1a1c 100644
--- a/templates/parts/lists/_filter.html.twig
+++ b/templates/parts/lists/_filter.html.twig
@@ -148,7 +148,7 @@
             {{ form_row(filterForm.discard) }}
 
             <div class="row mb-3">
-                <div class="col-sm-9 offset-sm-3">
+                <div class="{{ form_input_col_class }} {{ form_offset_col_class }}">
                     <button type="button" class="btn btn-danger" {{ stimulus_action('helpers/form_cleanup', 'clearAll') }}>{% trans %}filter.clear_filters{% endtrans %}</button>
                 </div>
             </div>
diff --git a/templates/settings/settings.html.twig b/templates/settings/settings.html.twig
index 96e0f209..050f55fb 100644
--- a/templates/settings/settings.html.twig
+++ b/templates/settings/settings.html.twig
@@ -43,7 +43,7 @@
                                     {{ (section_widget.vars.label ?? section_widget.vars.name|humanize)|trans }}
                                 </legend>
                                 <div class="row">
-                                    <div class="offset-sm-3 col mb-3 ps-2">
+                                    <div class="{{ form_offset_col_class }} col mb-3 ps-2">
                                         <b>{{ form_help(section_widget) }}</b>
                                         {{ form_errors(section_widget) }}
                                     </div>
diff --git a/templates/users/_2fa_settings.html.twig b/templates/users/_2fa_settings.html.twig
index 80392c17..0716b06d 100644
--- a/templates/users/_2fa_settings.html.twig
+++ b/templates/users/_2fa_settings.html.twig
@@ -37,11 +37,11 @@
 
                 {{ form_start(google_form, { 'attr': google_form_attr}) }}
                 {% if not tfa_google.enabled %}
-                    <div class="offset-sm-3">
+                    <div class="{{ form_offset_col_class }}">
                         <h6>{% trans %}tfa_google.disabled_message{% endtrans %}</h6>
                     </div>
 
-                    <div class="offset-sm-3 row">
+                    <div class="{{ form_offset_col_class }} row">
                         <div class="col-sm-3">
                             <img width="100%" class="img-fluid bg-white p-2" alt="{{ tfa_google.qrContent }}" src="{{ barcode_svg(tfa_google.qrContent) | data_uri("image/svg+xml") }}">
                         </div>
@@ -55,7 +55,7 @@
                         </div>
                     </div>
 
-                    <div class="offset-sm-3">
+                    <div class="{{ form_offset_col_class }}">
                         <button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#manualSetupCollapse" aria-expanded="false" aria-controls="manualSetupCollapse">
                             {% trans %}tfa_google.manual_setup{% endtrans %}
                         </button>
@@ -72,7 +72,7 @@
 
                     {{ form_row(google_form.google_confirmation) }}
                 {% else %}
-                    <div class="offset-sm-3">
+                    <div class="{{ form_offset_col_class }}">
                         <h6>{% trans %}tfa_google.enabled_message{% endtrans %}</h6>
                     </div>
                 {% endif %}
@@ -81,7 +81,7 @@
             </div>
             <div class="tab-pane fade" id="tfa-backup" role="tabpanel" aria-labelledby="backup-tab">
                 {% if user.backupCodes is empty %}
-                    <div class="offset-sm-3">
+                    <div class="{{ form_offset_col_class }}">
                         <h6>{% trans %}tfa_backup.disabled{% endtrans %}</h6>
                         <span>{% trans %}tfa_backup.explanation{% endtrans %}</span>
                     </div>
@@ -89,19 +89,19 @@
                     {% set backup_form_attr = { 'data-delete-form': true, 'data-controller': 'elements--delete-btn', 'data-action': 'submit->elements--delete-btn#submit',
                         'data-delete-title': 'tfa_backup.reset_codes.confirm_title' | trans, 'data-delete-message': 'tfa_backup.reset_codes.confirm_message' | trans} %}
                     {{ form_start(backup_form, { 'attr': backup_form_attr}) }}
-                    <div class="offset-sm-3">
+                    <div class="{{ form_offset_col_class }}">
                         <h6>{% trans %}tfa_backup.enabled{% endtrans %}</h6>
                         <span>{% trans %}tfa_backup.explanation{% endtrans %}</span>
                     </div>
-                    <div class="offset-sm-3 mt-2">
+                    <div class="{{ form_offset_col_class }} mt-2">
                         <p class="mb-0"><b>{% trans %}tfa_backup.remaining_tokens{% endtrans %}:</b> {{ user.backupCodes | length }}</p>
                         <p><b>{% trans %}tfa_backup.generation_date{% endtrans %}:</b> {{ user.backupCodesGenerationDate | format_datetime }}</p>
                     </div>
-                    <div class="offset-sm-3">
+                    <div class="{{ form_offset_col_class }}">
                         <a href="{{ path('show_backup_codes') }}" target="_blank" data-turbo="false" class="btn btn-primary">{% trans %}tfa_backup.show_codes{% endtrans %}</a>
                     </div>
 
-                    <div class="offset-sm-3 mt-2">
+                    <div class="{{ form_offset_col_class }} mt-2">
                         {{ form_widget(backup_form.reset_codes) }}
                     </div>
                     {{ form_end(backup_form) }}
diff --git a/templates/users/user_settings.html.twig b/templates/users/user_settings.html.twig
index 0f218a1b..35f6f9d9 100644
--- a/templates/users/user_settings.html.twig
+++ b/templates/users/user_settings.html.twig
@@ -28,7 +28,7 @@
             {{ form_row(settings_form.showEmailOnProfile) }}
             {{ form_row(settings_form.avatar_file) }}
             <div class="mb-3 row {% if user.masterPictureAttachment is null %}d-none{% endif %}">
-                <div class="offset-sm-3 col-sm-9">
+                <div class="{{ form_offset_col_class }} {{ form_input_col_class }}">
                     {% if user.masterPictureAttachment %}
                         <img src="{{ attachment_thumbnail(user.masterPictureAttachment, 'thumbnail_md') }}" alt="avatar" class="rounded" style="height: 75px;">
                     {% endif %}