From f4597192540f1693cc1206bb95a2d3f15ede15a4 Mon Sep 17 00:00:00 2001
From: Booteille <booteille@protonmail.com>
Date: Sat, 7 Dec 2024 15:26:49 +0100
Subject: [PATCH] Improve mobile view

---
 themes/default/public/css/custom.css   |  8 ++++++++
 themes/default/templates/index.html.ep | 18 +++++++++---------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/themes/default/public/css/custom.css b/themes/default/public/css/custom.css
index bb7f611..d62b0f6 100644
--- a/themes/default/public/css/custom.css
+++ b/themes/default/public/css/custom.css
@@ -73,6 +73,10 @@ a:not(#main-menu a) a:hover {
   color: var(--bulma-link-text);
 }
 
+.navbar {
+  overflow-x: auto;
+}
+
 #main-menu div.navbar-item:hover:has(form) {
   --bulma-navbar-item-background-l-delta: var(--bulma-navbar-item-hover-background-l-delta);
   --bulma-navbar-item-background-a: 1;
@@ -125,6 +129,10 @@ a:not(#main-menu a) a:hover {
   border-radius: var(--bulma-radius);
 }
 
+#uploaded-files .card-footer {
+  overflow-x: auto;
+}
+
 #file-js-upload {
   background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), calc(var(--bulma-scheme-main-ter-l)));
 }
diff --git a/themes/default/templates/index.html.ep b/themes/default/templates/index.html.ep
index ef3d47e..5f56109 100644
--- a/themes/default/templates/index.html.ep
+++ b/themes/default/templates/index.html.ep
@@ -192,12 +192,12 @@
           <div class="cell is-col-1">
               <span class="icon fas fa-file fa-2x is-large has-text-primary"></span>
           </div>
-          <div class="cell is-col-span-10">
+          <div class="cell is-col-span-9">
             <strong class="is-block wb-all name is-overflow-x"></strong>
             <small class="is-block size mt-1"></small>
           </div>
 
-          <div class="cell is-col-12 ">
+          <div class="cell is-col-10 ">
             <button class="is-narrow card-header-icon" aria-label="<%= l('Close') %>">
               <span class="delete"></span>
             </button>
@@ -221,12 +221,12 @@
           <div class="cell is-col-1">
               <span class="icon fas fa-file fa-2x is-large has-text-primary" aria-hidden="true"></span>
           </div>
-          <div class="cell is-col-span-10">
+          <div class="cell is-col-span-9">
             <strong class="is-block wb-all name is-overflow-x"></strong>
             <small class="is-block size mt-1"></small>
           </div>
 
-          <div class="cell is-col-12 ">
+          <div class="cell is-col-10 ">
             <button class="is-narrow card-header-icon" aria-label="<%= l('Close') %>">
               <span class="delete"></span>
             </button>
@@ -246,12 +246,12 @@
           <div class="cell is-col-1">
               <span class="icon fas fa-file fa-2x is-large has-text-primary" aria-hidden="true"></span>
           </div>
-          <div class="cell is-col-span-10">
+          <div class="cell is-col-span-9">
             <strong class="is-block wb-all name is-overflow-x"></strong>
             <small class="is-block size mt-1"></small>
           </div>
 
-          <button class="cell is-col-12 is-narrow has-text-right card-header-icon" aria-label="<%= l('Close') %>">
+          <button class="cell is-col-10 is-narrow has-text-right card-header-icon" aria-label="<%= l('Close') %>">
             <span class="delete"></span>
           </button>
         </div>
@@ -272,12 +272,12 @@
           <div class="cell is-col-1">
               <span class="icon fas fa-file fa-2x is-large has-text-primary" aria-hidden="true"></span>
           </div>
-          <div class="cell is-col-span-10">
+          <div class="cell is-col-span-9">
             <strong class="is-block wb-all name is-overflow-x name"></strong>
             <small class="is-block size mt-1 size"></small>
           </div>
 
-          <button class="cell is-col-12 is-narrow has-text-right card-header-icon" aria-label="<%= l('Close') %>">
+          <button class="cell is-col-10 is-narrow has-text-right card-header-icon" aria-label="<%= l('Close') %>">
             <span class="delete"></span>
           </button>
         </div>
@@ -287,7 +287,7 @@
     </div>
 
     % if (!defined stash('invitation')) {
-      <footer class="card-footer is-align-items-center">
+      <footer class="card-footer is-align-items-center ">
         <a href="#" class="card-footer-item action-copy">
           <span class="icon-text is-justify-content-center">
             <span class="icon fas fa-copy" aria-hidden="true"></span>