From dc3e3d32cb77c741d5803447dece11bf87fedb55 Mon Sep 17 00:00:00 2001
From: Debora Crescenzo <dcrescenzo@sipwise.com>
Date: Wed, 5 Mar 2025 15:43:14 +0000
Subject: [PATCH] MT#62251 Device Alignment Image Bugfix

The device alignment image is outside
of the screen view. This commit changes
the alignement of the page to have
all the content displayed without
lateral scrolling.

Change-Id: I6bfd5d23730544e22b7842b9ee005f6c3455e010
(cherry picked from commit 9b2b811dcb0ef74bf9264c04419d97901888c7ae)
---
 src/pages/CscPagePbxDeviceDetails.vue | 75 +++++++++++++--------------
 1 file changed, 36 insertions(+), 39 deletions(-)

diff --git a/src/pages/CscPagePbxDeviceDetails.vue b/src/pages/CscPagePbxDeviceDetails.vue
index 33046c3c..c79b7a68 100644
--- a/src/pages/CscPagePbxDeviceDetails.vue
+++ b/src/pages/CscPagePbxDeviceDetails.vue
@@ -38,13 +38,13 @@
             />
         </template>
 
-        <q-item
+        <div
             v-if="selectedTab === 'preferences'"
-            class="col col-xs-12 col-md-6"
+            class="col-12 column"
         >
-            <q-list
+            <div
                 v-if="changes"
-                class="col-xs-12 col-md-6 q-mr-xl"
+                class="col-12 col-md-6 q-pa-lg"
                 side
                 top
             >
@@ -104,13 +104,6 @@
                         />
                     </template>
                 </csc-pbx-model-select>
-            </q-list>
-            <q-list
-                v-if="changes"
-                class="col-xs-12 col-md-5 q-mr-xl"
-                side
-                top
-            >
                 <q-input
                     v-model="changes.admin_name"
                     :label="$t('Admin name')"
@@ -129,32 +122,36 @@
                         />
                     </template>
                 </q-input>
-                <q-toggle
-                    v-model="changes.web_gui_dis"
-                    class="q-pa-sm"
-                    :label="$t('Disable phone web interface')"
-                    :disable="isLoadingPreferences"
-                    @update:model-value="changeGui"
-                />
-                <q-toggle
-                    v-model="changes.user_conf_priority"
-                    class="q-pa-sm"
-                    :label="$t('User config priority over provisioning')"
-                    :disable="isLoadingPreferences"
-                    @update:model-value="changeUserConfig"
-                />
-                <q-toggle
-                    v-model="changes.FW_upg_dis"
-                    class="q-pa-sm"
-                    :label="$t('FW Upgrade disable')"
-                    :disable="isLoadingPreferences"
-                    @update:model-value="changeFW"
-                />
-            </q-list>
-            <q-list
-                v-if="changes"
-                class="col-xs-12 col-md-16 q-mr-xl"
-            >
+
+                <q-list>
+                    <q-item class="q-pb-sm q-mt-md">
+                        <q-toggle
+                            v-model="changes.web_gui_dis"
+                            :label="$t('Disable phone web interface')"
+                            :disable="isLoadingPreferences"
+                            @update:model-value="changeGui"
+                        />
+                    </q-item>
+                    <q-item class="q-pb-sm">
+                        <q-toggle
+                            v-model="changes.user_conf_priority"
+                            :label="$t('User config priority over provisioning')"
+                            :disable="isLoadingPreferences"
+                            @update:model-value="changeUserConfig"
+                        />
+                    </q-item>
+                    <q-item class="q-pb-sm">
+                        <q-toggle
+                            v-model="changes.FW_upg_dis"
+                            :label="$t('FW Upgrade disable')"
+                            :disable="isLoadingPreferences"
+                            @update:model-value="changeFW"
+                        />
+                    </q-item>
+                </q-list>
+            </div>
+
+            <div class="col-12 col-md-6 q-pa-lg">
                 <csc-pbx-device-config
                     v-if="deviceModelImageMap[deviceProfileMap[deviceSelected.profile_id].device_id]"
                     :device="deviceSelected"
@@ -166,8 +163,8 @@
                     :device-preferences="true"
                     @keysChanged="keysSave"
                 />
-            </q-list>
-        </q-item>
+            </div>
+        </div>
     </csc-page-sticky-tabs>
 </template>