From c0b51e83621736ce989b57b17f96f458ae9e57ce Mon Sep 17 00:00:00 2001
From: YouHaveTrouble <youhavetrouble@youhavetrouble.me>
Date: Mon, 2 Jun 2025 22:16:24 +0200
Subject: [PATCH] drastically improve applying adventurers interface section

---
 src/components/AdventurerRecruitment.vue | 63 ++++++++++++++++++++++--
 src/components/QuestGroup.vue            | 12 ++---
 2 files changed, 66 insertions(+), 9 deletions(-)

diff --git a/src/components/AdventurerRecruitment.vue b/src/components/AdventurerRecruitment.vue
index 543a35b..39cc4ea 100644
--- a/src/components/AdventurerRecruitment.vue
+++ b/src/components/AdventurerRecruitment.vue
@@ -101,19 +101,35 @@ export default defineComponent({
 <style scoped lang="scss">
 
 section {
-  min-height: 20rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow-x: hidden;
 }
 
 .adventurers {
   display: flex;
   flex-direction: row;
-  justify-content: center;
+  justify-content: start;
   align-items: center;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   gap: 1rem;
+  scroll-snap-type: x mandatory;
+  overflow-x: scroll;
+  width: 100%;
+  min-height: 12rem;
+
+  @media (min-width: 800px) {
+    flex-wrap: wrap;
+    justify-content: center;
+    overflow-x: hidden;
+    scroll-snap-type: none;
+    width: auto;
+  }
 
   .adventurer-tile {
     display: flex;
+    position: relative;
     justify-content: center;
     align-items: center;
     flex-direction: column;
@@ -122,6 +138,47 @@ section {
     cursor: pointer;
     padding-block: 1rem;
     padding-inline: 0.5rem;
+    min-width: 100%;
+    scroll-snap-align: center;
+
+    &:not(:first-of-type) {
+      &::before {
+        position: absolute;
+        left: 0;
+        top: 4rem;
+        content: "⇠";
+        width: 1rem;
+        height: 1rem;
+        line-height: 1;
+      }
+    }
+
+    &:not(:last-of-type) {
+      &::after {
+        position: absolute;
+        right: 0;
+        top: 4rem;
+        content: "⇢";
+        width: 1rem;
+        height: 1rem;
+        line-height: 1;
+      }
+    }
+
+
+
+    @media (min-width: 800px) {
+      min-width: auto;
+      scroll-snap-align: none;
+
+      &::before {
+        content: none !important;
+      }
+
+      &::after {
+        content: none !important;
+      }
+    }
 
     .hire-tile {
       height: 7rem;
diff --git a/src/components/QuestGroup.vue b/src/components/QuestGroup.vue
index c6101e6..19a9ffc 100644
--- a/src/components/QuestGroup.vue
+++ b/src/components/QuestGroup.vue
@@ -3,11 +3,11 @@
     <h1 v-if="label !== undefined">{{ label }}</h1>
     <section class="missives">
       <QuestMissive
-          v-for="(missive, key) in quests"
-          :key="key"
-          :adventurers="adventurers"
-          :missive="missive"
-          @click="finalizeQuest(missive)"
+        v-for="(missive, key) in quests"
+        :key="key"
+        :adventurers="adventurers"
+        :missive="missive"
+        @click="finalizeQuest(missive)"
       />
     </section>
   </div>
@@ -63,7 +63,7 @@ h1 {
   gap: 1rem;
   padding-block: 0.5rem;
   padding-inline: 5rem;
-  overflow-x: auto;
+  overflow-x: scroll;
   scroll-snap-type: x mandatory;
   width: 100vw;
   max-width: 100%;