feat: Allow to expand section templates drawer - MEED-8076 - Meeds-io…

…/MIPs#172 (#279)

Prior to this change, the section templates drawer wasn't allowing to be
expanded. This change allows to expand the section templates cards to be
displayed in a row when the drawer gets expanded.

layout-webapp/src/main/webapp/vue-app/layout-editor/components/drawer/AddSectionDrawer.vue

@@ -25,6 +25,7 @@
     id="addSectionDrawer"
     v-model="drawer"
     :loading="loading"
+    allow-expand
     right
     disable-pull-to-refresh>
     <template #title>
@@ -45,7 +46,7 @@
               :key="t.id"
               :section-template="t"
               :selected="t.id === selectedSectionTemplate?.id"
-              class="col-6 ps-0 pe-4"
+              class="col-auto ps-0 pe-4"
               @select="selectedSectionTemplate = t" />
           </div>
         </template>
@@ -59,7 +60,7 @@
               :key="t.id"
               :section-template="t"
               :selected="t.id === selectedSectionTemplate?.id"
-              class="col-6 ps-0 pe-4"
+              class="col-auto ps-0 pe-4"
               @select="selectedSectionTemplate = t" />
           </div>
         </template>
@@ -73,7 +74,7 @@
               :key="t.id"
               :section-template="t"
               :selected="t.id === selectedSectionTemplate?.id"
-              class="col-6 ps-0 pe-4"
+              class="col-auto ps-0 pe-4"
               @select="selectedSectionTemplate = t" />
           </div>
         </template>

layout-webapp/src/main/webapp/vue-app/layout-editor/components/form/SectionTemplate.vue

@@ -29,6 +29,8 @@
           'border-color': !selected,
         }"
         class="d-flex flex-column pa-2 hover-elevation overflow-hidden position-relative"
+        min-width="170"
+        max-width="170"
         min-height="150"
         max-height="150"
         flat