From fe155cbdbe8f5f73c41be0b65d7ca2b213b9c3a1 Mon Sep 17 00:00:00 2001
From: Moe <github@m03.ca>
Date: Sat, 23 Oct 2021 23:17:28 -0700
Subject: [PATCH] fix overflowing username

---
 web/pages/blocks/home/menuSide.ejs | 35 +++++++++++++++++-------------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/web/pages/blocks/home/menuSide.ejs b/web/pages/blocks/home/menuSide.ejs
index 73165538..6c1ff542 100644
--- a/web/pages/blocks/home/menuSide.ejs
+++ b/web/pages/blocks/home/menuSide.ejs
@@ -1,19 +1,24 @@
-<% const menuInfo = define.SideMenu.blocks.Container1 %>
+<% const menuInfo = define.SideMenu.blocks.Container1
+    const showMonitors = define.SideMenu.showMonitors; %>
 <nav id="<%- menuInfo.id || 'sidebarMenu' %>" class="<%- menuInfo.class || 'col-md-3 col-lg-2 d-md-block sidebar collapse' %>">
     <div id="menu-side" class="position-sticky">
-        <div class="d-flex flex-row align-items-center p-3 m-3 btn-default rounded shadow-sm cursor-pointer">
-          <div class="lh-1" data-bs-toggle="collapse" data-bs-target=".home-collapse">
-              <img class="me-3" src="<%- window.libURL + config.logoLocation196x196 %>" width="48" style="<%- config.logoLocation76x76Style %>">
-          </div>
-          <div class="flex-grow-1" data-bs-toggle="collapse" data-bs-target=".home-collapse">
-            <h1 class="h6 mb-0 lh-1 text-ellipsis"><%- $user.mail %></h1>
-            <small><%- lang.Monitors %> : <span class="cameraCount"></span></small>
-          </div>
-          <% if(define.SideMenu.showMonitors){ %>
-          <div class="lh-1">
-              <a class_toggle="compressed-monitor-icons" data-target="#monitorSideList" icon-toggle="fa-th fa-bars" icon-child="i"><i class="fa fa-th"></i></a>
-          </div>
-          <% } %>
+        <div class="align-items-center d-flex flex-row p-3 my-3 m-3 btn-default rounded shadow-sm cursor-pointer" style="overflow: hidden;">
+            <div class="align-items-center mr-3">
+                <div class="lh-1" <%- showMonitors ? `data-bs-toggle="collapse" data-bs-target=".home-collapse"` : '' %>>
+                    <img src="<%- window.libURL + config.logoLocation196x196 %>" width="42" style="<%- config.logoLocation76x76Style %>">
+                </div>
+            </div>
+            <div class="flex-grow-1 align-items-center mr-3" <%- showMonitors ? `data-bs-toggle="collapse" data-bs-target=".home-collapse"` : '' %>>
+                <h1 class="h6 mb-0 lh-1 text-ellipsis" style="overflow: hidden;"><%- $user.mail %></h1>
+                <small><%- lang.Monitors %> : <span class="cameraCount"></span></small>
+            </div>
+            <% if(showMonitors){ %>
+            <div class="align-items-center mr-3 btn-default rounded shadow-sm cursor-pointer">
+                <div class="lh-1">
+                    <a class_toggle="compressed-monitor-icons" data-target="#monitorSideList" icon-toggle="fa-th fa-bars" icon-child="i"><i class="fa fa-th"></i></a>
+                </div>
+            </div>
+            <% } %>
         </div>
         <%
           var drawBlock
@@ -50,7 +55,7 @@
                   <div id="createdTabLinks" class="pb-3 px-3 hidden-empty"></div>
               </ul>
           </div>
-          <% if(define.SideMenu.showMonitors){ %>
+          <% if(showMonitors){ %>
               <div>
                   <div class="form-group px-3">
                      <input class="form-control dark" placeholder="Search Monitors" id="monitors_list_search">