From d2e7a4eb20658146d37ae3b24914203d51df988c Mon Sep 17 00:00:00 2001
From: Chris Kankiewicz <Chris@ChrisKankiewicz.com>
Date: Tue, 7 Jan 2020 21:54:20 -0700
Subject: [PATCH] Fixed some mobile styling issues

---
 app/resources/views/components/file.twig   | 34 ++++++++++------------
 app/resources/views/components/header.twig |  2 +-
 2 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/app/resources/views/components/file.twig b/app/resources/views/components/file.twig
index cd91b66..038cc61 100644
--- a/app/resources/views/components/file.twig
+++ b/app/resources/views/components/file.twig
@@ -3,7 +3,7 @@
     class="flex flex-col items-center rounded-lg group hover:bg-gray-200 hover:shadow"
 >
     <div class="flex justify-between items-center p-4 w-full">
-        <div class="flex-shrink pr-2">
+        <div class="pr-2">
             {% if parentDir %}
                 <i class="fas fa-level-up-alt fa-fw fa-lg"></i>
             {% else %}
@@ -11,26 +11,22 @@
             {% endif %}
         </div>
 
-        <div class="flex-grow sm:mr-2">
-            <div class="flex justify-between items-center">
-                <div class="truncate">
-                    {{ parentDir ? '..' : file.getRelativePathname }}
-                </div>
-
-                {% if file.isFile %}
-                    <div class="ml-2">
-                        <button
-                            title="File Info"
-                            class="flex justify-center items-center rounded-full p-2 -m-1 invisible hover:bg-gray-400 hover:shadow group-hover:visible"
-                            v-on:click.prevent="showFileInfo('{{ file.getRelativePathname }}')"
-                        >
-                            <i class="fas fa-info-circle"></i>
-                        </button>
-                    </div>
-                {% endif %}
-            </div>
+        <div class="flex-1 truncate">
+            {{ parentDir ? '..' : file.getRelativePathname }}
         </div>
 
+        {% if file.isFile %}
+            <div class="ml-2">
+                <button
+                    title="File Info"
+                    class="flex justify-center items-center rounded-full p-2 -m-1 md:invisible hover:bg-gray-400 hover:shadow group-hover:visible"
+                    v-on:click.prevent="showFileInfo('{{ file.getRelativePathname }}')"
+                >
+                    <i class="fas fa-info-circle"></i>
+                </button>
+            </div>
+        {% endif %}
+
         <div class="hidden whitespace-no-wrap text-right mx-2 w-1/6 sm:block">
             {% if parentDir or file.isDir %}
                     —
diff --git a/app/resources/views/components/header.twig b/app/resources/views/components/header.twig
index 8259c91..c6481bb 100644
--- a/app/resources/views/components/header.twig
+++ b/app/resources/views/components/header.twig
@@ -1,6 +1,6 @@
 <header id="header" class="bg-blue-600 shadow sticky top-0">
     <div class="container flex flex-col justify-between items-center mx-auto p-4 md:flex-row">
-        <div class="text-white text-sm tracking-tight my-2">
+        <div class="text-white text-sm tracking-tight mb-2 md:my-2">
             <a href="/" class="hover:underline">Home</a>
 
             {% for name, path in breadcrumbs %}