GH-2149 Remove unnecessary paddings from file browser on mobile & imp…

…rove text wrapping (#1910) * Mobile UI fix for FileList * Remove media query * Fix + smaller padding
dzikoysk · Jun 30, 2024 · 01888f4 · 01888f4
1 parent e7d045e
commit 01888f4
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git 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
@@ -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>