From 01888f44aa06ceed7249008a0953b7125813bf1e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20J=C4=99siak?=
 <84834748+Astahiell@users.noreply.github.com>
Date: Sun, 30 Jun 2024 13:45:44 +0200
Subject: [PATCH] GH-2149 Remove unnecessary paddings from file browser on
 mobile & improve text wrapping  (#1910)

* Mobile UI fix for FileList

* Remove media query

* Fix + smaller padding
---
 reposilite-frontend/src/App.vue                       |  2 +-
 .../src/components/browser/DetailedListEntry.vue      | 11 +++++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/reposilite-frontend/src/App.vue b/reposilite-frontend/src/App.vue
index 905d82e9f..d332cca7c 100644
--- a/reposilite-frontend/src/App.vue
+++ b/reposilite-frontend/src/App.vue
@@ -63,7 +63,7 @@ html, body {
   min-height: calc(100vh - 2rem);
 }
 .container {
-  @apply px-10;
+  @apply px-10 <sm:px-2;
 }
 .active {
   @apply dark:border-white;
diff --git a/reposilite-frontend/src/components/browser/DetailedListEntry.vue b/reposilite-frontend/src/components/browser/DetailedListEntry.vue
index 4c04e030c..1933a4278 100644
--- a/reposilite-frontend/src/components/browser/DetailedListEntry.vue
+++ b/reposilite-frontend/src/components/browser/DetailedListEntry.vue
@@ -57,7 +57,7 @@ const defaultMode = computed(() => !props.compactMode)
 
 <template>
   <div class="browser-entry" :class="{ 'default-entry': defaultMode, 'compact-entry': compactMode }">
-    <div class="flex flex-row">
+    <div class="flex flex-row max-w-full">
       <div v-if="file.type == 'DIRECTORY'" :class="{ 'default-icon': defaultMode, 'compact-icon': compactMode }">⚫</div>
       <div v-else :class="{ 'default-icon': defaultMode, 'compact-icon': compactMode }">⚪</div>
       <div :class="{ 'default-filename': defaultMode, 'compact-filename': compactMode }">{{file.name}}</div>
@@ -101,7 +101,7 @@ const defaultMode = computed(() => !props.compactMode)
 }
 
 .default-entry {
-  @apply flex flex-row justify-between mb-1.5 py-3 rounded-full default-button;
+  @apply flex flex-row justify-between mb-1.5 py-3 rounded-3xl default-button <sm:rounded-xl;
 }
 .compact-entry {
   @apply rounded-lg inline-block w-full flex;
@@ -110,16 +110,19 @@ const defaultMode = computed(() => !props.compactMode)
 }
 
 .default-icon {
-  @apply text-xm px-6 pt-1.75;
+  @apply text-xm px-6 pt-1.75 <sm:px-3;
 }
 .compact-icon {
-  @apply text-xxs pl-4 pt-2;
+  @apply text-xxs pl-4 pt-2 <sm:px-3;
 }
 
 .default-filename {
   @apply font-semibold;
+  overflow-wrap: anywhere;
 }
 .compact-filename {
   @apply pl-3 pr-2 w-full whitespace-nowrap;
+  overflow-wrap: anywhere;
+  text-wrap: auto;
 }
 </style>
\ No newline at end of file