user icon to navbar

views/css/titlebar.css

@@ -9,11 +9,16 @@
 html {
     background: #09090b;
     visibility: hidden;
+    /* Agregado scrollbar-gutter para reservar espacio estable */
+    scrollbar-gutter: stable;
 }
 
 html.electron {
     margin: 0;
     box-sizing: border-box;
+    /* Overflow optimizado para evitar desplazamiento horizontal */
+    overflow-x: hidden;
+    overflow-y: auto;
 }
 
 html.electron .navbar,
@@ -39,12 +44,13 @@ html.electron .back-btn {
     padding: 0 12px;
     -webkit-app-region: drag;
     user-select: none;
-    font-family: 'Inter', system-ui, sans-serif;
+    font-family: "Inter", system-ui, sans-serif;
     border-bottom: 1px solid rgba(139, 92, 246, 0.2);
     position: fixed;
     top: 0;
     left: 0;
-    right: 0;
+    /* Cambiado a width: 100vw para ocupar todo el viewport sin considerar scrollbar */
+    width: 100vw;
     z-index: 999999;
     backdrop-filter: blur(12px);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
@@ -133,8 +139,11 @@ html.electron .back-btn {
     transform: scale(1.1);
 }
 
+/* Scrollbar mejorado para no afectar el layout */
 html.electron::-webkit-scrollbar {
     width: 12px;
+    /* Posicionamiento absoluto para overlay */
+    position: absolute;
 }
 
 html.electron::-webkit-scrollbar-track {
@@ -150,4 +159,34 @@ html.electron::-webkit-scrollbar-thumb {
 
 html.electron::-webkit-scrollbar-thumb:hover {
     background: rgba(139, 92, 246, 0.5);
-}
+}
+
+/* Asegurar que body también maneje el overflow correctamente */
+body {
+    margin: 0;
+    padding: 0;
+    overflow-x: hidden;
+}
+
+.user-box {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-right: 12px;
+}
+
+.user-box img {
+    width: 26px;
+    height: 26px;
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+.user-box span {
+    font-size: 13px;
+    opacity: 0.9;
+}
+
+.hidden {
+    display: none;
+}