From 30d3b4d72edd62116e900b65f8ed618f3e44ac60 Mon Sep 17 00:00:00 2001
From: Mykola Symon <simonnikolaj20@gmail.com>
Date: Mon, 31 Oct 2022 19:31:05 +0300
Subject: [PATCH 1/2] move control buttons down on small screens(<sm)

---
 src/www/index.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/www/index.html b/src/www/index.html
index 7d5da28..d84abe9 100644
--- a/src/www/index.html
+++ b/src/www/index.html
@@ -121,7 +121,7 @@
                 </div>
               </div>
 
-              <div class="relative p-5 z-10 flex flex-row">
+              <div class="relative p-5 z-10 flex flex-row flex-wrap justify-start">
                 <div class="h-10 w-10 mr-5 rounded-full bg-gray-50 relative">
                   <svg class="w-6 m-2 text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                     fill="currentColor">
@@ -137,7 +137,7 @@
                   </div>
                 </div>
 
-                <div class="flex-grow">
+                <div class="sm:flex-grow">
 
                   <!-- Name -->
                   <div class="text-gray-700 group" :title="'Created on ' + dateTime(new Date(client.createdAt))">
@@ -230,7 +230,7 @@
                   </div>
                 </div>
 
-                <div class="text-right">
+                <div class="text-right w-full sm:w-auto mt-3 sm:mt-0">
                   <div class="text-gray-400">
 
                     <!-- Enable/Disable -->

From 85ed6d2b23ea558b38e875585c25ac240abfc2af Mon Sep 17 00:00:00 2001
From: Mykola Symon <simonnikolaj20@gmail.com>
Date: Mon, 31 Oct 2022 19:45:07 +0300
Subject: [PATCH 2/2] add client name clipping(with ellipsis) on small
 screens(<sm)

---
 src/www/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/www/index.html b/src/www/index.html
index d84abe9..e3600b5 100644
--- a/src/www/index.html
+++ b/src/www/index.html
@@ -148,8 +148,8 @@
                       v-on:keyup.escape="clientEditName = null; clientEditNameId = null;"
                       :ref="'client-' + client.id + '-name'"
                       class="rounded px-1 border-2 border-gray-100 focus:border-gray-200 outline-none w-30" />
-                    <span v-show="clientEditNameId !== client.id"
-                      class="inline-block border-t-2 border-b-2 border-transparent">{{client.name}}</span>
+                    <span v-show="clientEditNameId !== client.id" style="max-width: 28ch;"
+                      class="inline-block border-t-2 border-b-2 border-transparent align-top sm:w-auto overflow-hidden sm:overflow-visible overflow-ellipsis">{{client.name}}</span>
 
                     <!-- Edit -->
                     <span v-show="clientEditNameId !== client.id"