Merge branch 'dev' into main

Author: gustavotoyota

apps/client/src-capacitor/android/app/version.properties

@@ -1,2 +1,2 @@
-#Sun Jun 25 20:35:58 AMT 2023
-VERSION_CODE=24
+#Tue Jun 27 13:08:24 AMT 2023
+VERSION_CODE=28

apps/client/src/layouts/PagesLayout/MainContent/DisplayUI/DisplayHorizontalPage.vue

@@ -69,7 +69,7 @@ const isEmpty = computed(
   pointer-events: auto;
   cursor: pointer;
 
-  max-width: calc(100vw / 3.5);
+  max-width: min(120px, 100vw / 4);
 }
 
 .group-title {

apps/client/src/layouts/PagesLayout/MainContent/DisplayUI/DisplayHorizontalPath.vue

@@ -1,19 +1,22 @@
 <template>
   <div
+    class="horizontal-path"
     style="
       position: absolute;
       left: 12px;
       right: 12px;
-      top: 7px;
+      top: 8px;
       font-size: 13px;
       white-space: nowrap;
 
       text-align: left;
       direction: rtl;
+
+      overflow: scroll;
     "
   >
-    <div style="display: inline-block">
-      <div style="display: flex; gap: 4px; direction: ltr">
+    <div style="display: inline-block; pointer-events: auto">
+      <div style="display: flex; gap: 5px; direction: ltr">
         <template
           v-for="(pageId, index) in internals.pages.react.pathPageIds.slice(
             0,
@@ -38,3 +41,15 @@
 <script setup lang="ts">
 import DisplayHorizontalPage from './DisplayHorizontalPage.vue';
 </script>
+
+<style scoped lang="scss">
+/* Hide scrollbar */
+
+.horizontal-path {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.horizontal-path::-webkit-scrollbar {
+  display: none;
+}
+</style>

apps/client/src/layouts/PagesLayout/MainContent/DisplayUI/DisplayLeftBtns.vue

@@ -113,7 +113,7 @@ async function goForward() {
   position: absolute;
 
   left: 12px;
-  top: 53px;
+  top: 55px;
 
   display: flex;
   flex-direction: column;

apps/client/src/layouts/PagesLayout/MainContent/DisplayUI/DisplayRightBtns.vue

@@ -87,7 +87,7 @@ const page = computed(() => internals.pages.react.page);
   position: absolute;
 
   right: 12px;
-  top: 53px;
+  top: 55px;
 
   display: flex;
   flex-direction: column;