From 9933766adfd7e74f85d0d420612c25da8945fffc Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@omg.lol>
Date: Wed, 29 Dec 2021 12:50:51 +0000
Subject: [PATCH] :lipstick: Display horizontally in wide mode

---
 src/components/LinkItems/Section.vue | 18 +++++++++++++++++-
 src/views/Home.vue                   |  1 +
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/components/LinkItems/Section.vue b/src/components/LinkItems/Section.vue
index 6d230af6..351bd60f 100644
--- a/src/components/LinkItems/Section.vue
+++ b/src/components/LinkItems/Section.vue
@@ -57,7 +57,9 @@
         :itemSize="itemSize"
       />
     </div>
-    <div v-else-if="sectionType === 'widget'">
+    <div
+      v-else-if="sectionType === 'widget'"
+      :class="`widget-list ${isWide? 'wide' : ''}`">
       <WidgetBase
         v-for="(widget, widgetIndx) in widgets"
         :key="widgetIndx"
@@ -119,6 +121,7 @@ export default {
     items: Array,
     widgets: Array,
     index: Number,
+    isWide: Boolean,
   },
   components: {
     Collapsable,
@@ -345,4 +348,17 @@ export default {
     border-style: dashed;
   }
 }
+
+.widget-list {
+  &.wide {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-around;
+    .widget-base  {
+      min-width: 10rem;
+      width: -webkit-fill-available;
+    }
+  }
+}
+
 </style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 77320bb3..5ca2c3c3 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -41,6 +41,7 @@
           :itemSize="itemSizeBound"
           @itemClicked="finishedSearching()"
           @change-modal-visibility="updateModalVisibility"
+          :isWide="!!singleSectionView || layoutOrientation === 'horizontal'"
           :class="
           (searchValue && filterTiles(section.items, searchValue).length === 0) ? 'no-results' : ''"
         />