GeneralBots/botui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(docs): fix layout - AI panel on right, remove black strips, clean toolbar

Browse source 
- Remove editor-header/footer from default view (caused blue bar)
- Force light background (#f8f9fa) on all parent containers
- Fix chat-panel to be true flex child with order:2 for right side
- Simplify CSS with hardcoded colors instead of variables for reliability
- Set chat panel width to 280px with proper flex properties
- Hide header/footer by default, show only when content exists
- Clean up responsive breakpoints
This commit is contained in:
Rodrigo Rodriguez (Pragmatismo) 2026-01-12 00:03:48 -03:00
parent 7b2cf282ae
commit cc40ddb65f
2 changed files with 120 additions and 172 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

280
ui/suite/docs/docs.css
View file

@ -1,6 +1,6 @@
/* ============================================================================= /* =============================================================================
GB DOCS - Modern Document Editor Styles GB DOCS - Modern Document Editor Styles
Theme-aware, A4 centered page, with AI chat panel Google Docs-like interface with AI chat panel
============================================================================= */ ============================================================================= */
/* ============================================================================= /* =============================================================================
@ -8,23 +8,8 @@
============================================================================= */ ============================================================================= */
:root { :root {
/* Page dimensions for A4-style document */
--docs-page-width: 816px; --docs-page-width: 816px;
--docs-page-min-height: 1056px; --docs-page-min-height: 1056px;
--docs-page-padding: 96px 72px;
--docs-page-shadow: var(--sentient-shadow-md, 0 2px 8px rgba(0, 0, 0, 0.1));
/* Docs-specific colors - use sentient bridge variables with fallbacks */
/* Document editors typically need light backgrounds for readability */
--docs-bg: var(--sentient-bg-tertiary, #f5f5f5);
--docs-surface: var(--sentient-surface-elevated, #ffffff);
--docs-surface-hover: var(--sentient-surface-hover, #f0f0f0);
--docs-text: var(--sentient-text-primary, #212121);
--docs-text-secondary: var(--sentient-text-secondary, #666666);
--docs-text-muted: var(--sentient-text-tertiary, #999999);
--docs-border: var(--sentient-border, #e0e0e0);
--docs-accent: var(--sentient-accent, #4285f4);
--docs-accent-hover: var(--sentient-accent-hover, #3367d6);
} }
* { * {
@ -32,7 +17,7 @@
} }
/* ============================================================================= /* =============================================================================
MAIN LAYOUT MAIN LAYOUT - Full height, light background
============================================================================= */ ============================================================================= */
.docs-app { .docs-app {
@ -40,76 +25,61 @@
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
min-height: 100%; min-height: 100%;
max-height: 100%; background: #f8f9fa !important;
background: var(--docs-bg, #f5f5f5); color: #202124;
color: var(--docs-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-family: var(--sentient-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
overflow: hidden; overflow: hidden;
flex: 1; position: relative;
width: 100%;
} }
/* Prevent parent scroll when docs app is active */ /* Force light background everywhere */
html:has(.docs-app), html:has(.docs-app),
body:has(.docs-app) { body:has(.docs-app),
overflow: hidden !important;
background: var(--docs-bg, #f5f5f5) !important;
}
#main-content:has(.docs-app), #main-content:has(.docs-app),
.app-main:has(.docs-app), .app-main:has(.docs-app),
[data-app="docs"], .suite-content-panel:has(.docs-app),
.suite-content-panel:has(.docs-app) { [data-app="docs"] {
overflow: hidden !important; overflow: hidden !important;
background: var(--docs-bg, #f5f5f5) !important; background: #f8f9fa !important;
background-color: var(--docs-bg, #f5f5f5) !important; background-color: #f8f9fa !important;
}
#main-content:has(.docs-app) {
height: 100% !important; height: 100% !important;
padding: 0 !important; padding: 0 !important;
margin: 0 !important; margin: 0 !important;
} }
/* Override any dark theme backgrounds when docs is active */
body:has(.docs-app) #main-content,
body:has(.docs-app) .app-main,
body:has(.docs-app) .suite-content-panel {
background: var(--docs-bg, #f5f5f5) !important;
background-color: var(--docs-bg, #f5f5f5) !important;
}
/* ============================================================================= /* =============================================================================
TOOLBAR TOOLBAR - Document name left, tools center, share right
============================================================================= */ ============================================================================= */
.docs-toolbar { .docs-toolbar {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; padding: 0 12px;
padding: 8px 16px; background: #ffffff;
background: var(--docs-surface); border-bottom: 1px solid #dadce0;
border-bottom: 1px solid var(--docs-border); height: 48px;
gap: 16px; min-height: 48px;
flex-shrink: 0; flex-shrink: 0;
min-height: 52px;
}
.toolbar-left,
.toolbar-center,
.toolbar-right {
display: flex;
align-items: center;
gap: 8px; gap: 8px;
} }
.toolbar-left { .toolbar-left {
flex: 0 0 auto; display: flex;
min-width: 200px; align-items: center;
flex-shrink: 0;
} }
.toolbar-center { .toolbar-center {
display: flex;
align-items: center;
flex: 1; flex: 1;
justify-content: flex-start; gap: 4px;
overflow-x: auto; overflow-x: auto;
padding: 4px 0; padding: 4px 8px;
margin: 0 8px;
} }
.toolbar-center::-webkit-scrollbar { .toolbar-center::-webkit-scrollbar {
@ -117,39 +87,41 @@ body:has(.docs-app) .suite-content-panel {
} }
.toolbar-center::-webkit-scrollbar-thumb { .toolbar-center::-webkit-scrollbar-thumb {
background: var(--docs-border); background: #dadce0;
border-radius: 2px; border-radius: 2px;
} }
.toolbar-right { .toolbar-right {
flex: 0 0 auto; display: flex;
gap: 12px; align-items: center;
flex-shrink: 0;
gap: 8px;
} }
.toolbar-group { .toolbar-group {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 4px; gap: 2px;
} }
.toolbar-divider { .toolbar-divider {
width: 1px; width: 1px;
height: 24px; height: 20px;
background: var(--docs-border); background: #dadce0;
margin: 0 8px; margin: 0 6px;
flex-shrink: 0; flex-shrink: 0;
} }
.doc-name-input { .doc-name-input {
border: 1px solid transparent; border: 1px solid transparent;
background: transparent; background: transparent;
font-size: 16px; font-size: 18px;
font-weight: 500; font-weight: 400;
color: var(--docs-text); color: #202124;
padding: 6px 10px; padding: 4px 8px;
border-radius: var(--sentient-radius-sm, 4px); border-radius: 4px;
width: 100%; width: 200px;
max-width: 250px; max-width: 200px;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
@ -343,7 +315,7 @@ body:has(.docs-app) .suite-content-panel {
} }
/* ============================================================================= /* =============================================================================
MAIN CONTENT AREA MAIN CONTENT AREA - Canvas left, Chat panel right (SIDE BY SIDE)
============================================================================= */ ============================================================================= */
.docs-main { .docs-main {
@ -351,10 +323,8 @@ body:has(.docs-app) .suite-content-panel {
flex-direction: row; flex-direction: row;
flex: 1 1 auto; flex: 1 1 auto;
overflow: hidden; overflow: hidden;
background: #f8f9fa !important;
min-height: 0; min-height: 0;
height: 100%;
background: var(--docs-bg, #f5f5f5);
background-color: var(--docs-bg, #f5f5f5) !important;
width: 100%; width: 100%;
position: relative; position: relative;
} }
@ -366,38 +336,35 @@ body:has(.docs-app) .suite-content-panel {
.docs-canvas { .docs-canvas {
flex: 1 1 auto; flex: 1 1 auto;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: auto;
padding: 32px; padding: 20px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: flex-start; align-items: flex-start;
background: var(--docs-bg, #f5f5f5); background: #f8f9fa !important;
background-color: var(--docs-bg, #f5f5f5) !important;
min-height: 0; min-height: 0;
min-width: 0; min-width: 0;
height: 100%;
} }
.editor-page { .editor-page {
width: var(--docs-page-width); width: 816px;
min-height: var(--docs-page-min-height); min-width: 816px;
background: var(--docs-surface, #ffffff); min-height: 1056px;
background-color: var(--docs-surface, #ffffff) !important; background: #ffffff;
box-shadow: var(--docs-page-shadow); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
border-radius: 2px; border-radius: 0;
padding: var(--docs-page-padding); padding: 72px 72px;
margin-bottom: 32px; margin-bottom: 24px;
flex-shrink: 0; flex-shrink: 0;
position: relative;
} }
.editor-content { .editor-content {
min-height: 100%; min-height: 800px;
outline: none; outline: none;
font-family: "Times New Roman", Georgia, serif; font-family: "Arial", sans-serif;
font-size: 12pt; font-size: 11pt;
line-height: 1.5; line-height: 1.15;
color: var(--docs-text, #212121); color: #202124;
background: transparent; background: transparent;
} }
@ -525,12 +492,12 @@ body:has(.docs-app) .suite-content-panel {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 4px 16px; padding: 4px 16px;
background: var(--docs-surface); background: #ffffff;
border-top: 1px solid var(--docs-border); border-top: 1px solid #dadce0;
font-size: 12px; font-size: 12px;
color: var(--docs-text-secondary); color: #5f6368;
height: 28px; height: 24px;
min-height: 28px; min-height: 24px;
flex-shrink: 0; flex-shrink: 0;
} }
@ -571,35 +538,31 @@ body:has(.docs-app) .suite-content-panel {
} }
/* ============================================================================= /* =============================================================================
CHAT PANEL CHAT PANEL - RIGHT SIDE (MUST BE FLEX CHILD OF docs-main)
============================================================================= */ ============================================================================= */
.chat-panel { .chat-panel {
width: 320px; width: 280px;
min-width: 320px; min-width: 280px;
max-width: 320px; max-width: 280px;
flex: 0 0 280px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: var(--docs-surface, #ffffff); background: #ffffff;
border-left: 1px solid var(--docs-border, #e0e0e0); border-left: 1px solid #e0e0e0;
flex-shrink: 0;
flex-grow: 0;
min-height: 0;
height: 100%; height: 100%;
transition: overflow: hidden;
width 0.3s ease, order: 2; /* Ensure it's on the right */
min-width 0.3s ease,
opacity 0.3s ease;
} }
.chat-panel.collapsed { .chat-panel.collapsed {
width: 0; width: 0;
min-width: 0; min-width: 0;
max-width: 0; max-width: 0;
opacity: 0; flex: 0 0 0;
overflow: hidden; overflow: hidden;
padding: 0;
border-left: none; border-left: none;
display: none;
} }
.chat-header { .chat-header {
@ -607,7 +570,8 @@ body:has(.docs-app) .suite-content-panel {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 12px 16px; padding: 12px 16px;
border-bottom: 1px solid var(--docs-border); border-bottom: 1px solid #dadce0;
flex-shrink: 0;
} }
.chat-title { .chat-title {
@ -617,14 +581,10 @@ body:has(.docs-app) .suite-content-panel {
} }
.chat-avatar { .chat-avatar {
width: 36px; width: 32px;
height: 36px; height: 32px;
border-radius: 50%; border-radius: 50%;
background: linear-gradient( background: linear-gradient(135deg, #1a73e8, #8e44ad);
135deg,
var(--docs-accent),
#8e44ad
);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -635,31 +595,30 @@ body:has(.docs-app) .suite-content-panel {
margin: 0; margin: 0;
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: var(--docs-text); color: #202124;
} }
.chat-status { .chat-status {
font-size: 12px; font-size: 12px;
color: var(--docs-text-muted); color: #5f6368;
} }
.chat-close { .chat-close {
width: 32px; width: 28px;
height: 32px; height: 28px;
border: none; border: none;
background: transparent; background: transparent;
color: var(--docs-text-muted); color: #5f6368;
border-radius: var(--sentient-radius-sm, 4px); border-radius: 4px;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all 0.15s ease;
} }
.chat-close:hover { .chat-close:hover {
background: var(--docs-bg); background: #f1f3f4;
color: var(--docs-text); color: #202124;
} }
.chat-messages { .chat-messages {
@ -1063,26 +1022,19 @@ body:has(.docs-app) .suite-content-panel {
@media (max-width: 1024px) { @media (max-width: 1024px) {
.chat-panel { .chat-panel {
position: fixed; position: fixed;
top: var(--header-height, 40px); top: 100px;
right: 0; right: 0;
bottom: 28px; bottom: 24px;
width: 320px; width: 300px;
min-width: 320px; min-width: 300px;
max-width: 320px; max-width: 300px;
z-index: 100; z-index: 100;
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1); box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
height: auto; height: auto;
} }
.chat-panel.collapsed { .chat-panel.collapsed {
transform: translateX(100%); transform: translateX(100%);
width: 320px;
min-width: 320px;
opacity: 1;
}
.docs-main {
flex-direction: row;
} }
} }
@ -1092,7 +1044,7 @@ body:has(.docs-app) .suite-content-panel {
} }
.doc-name-input { .doc-name-input {
max-width: 150px; max-width: 120px;
} }
.btn-primary span { .btn-primary span {
@ -1111,11 +1063,13 @@ body:has(.docs-app) .suite-content-panel {
} }
.docs-canvas { .docs-canvas {
padding: 16px 8px; padding: 12px;
} }
.editor-page { .editor-page {
padding: 48px 36px; width: 100%;
min-width: auto;
padding: 24px;
min-height: auto; min-height: auto;
} }
@ -1411,24 +1365,30 @@ body:has(.docs-app) .suite-content-panel {
/* ============================================================================= /* =============================================================================
HEADER & FOOTER HEADER & FOOTER - Hidden by default, no blue bar
============================================================================= */ ============================================================================= */
.editor-header, .editor-header,
.editor-footer { .editor-footer {
min-height: 48px; display: none; /* Hidden by default - show only when content added */
padding: 12px 24px; min-height: 32px;
font-size: 11px; padding: 8px 0;
color: var(--docs-text-secondary, #666666); font-size: 10px;
border: 1px dashed transparent; color: #9aa0a6;
transition: border-color 0.15s ease, background 0.15s ease; border: none;
background: transparent; background: transparent !important;
background-color: transparent !important;
}
.editor-header:not(:empty),
.editor-footer:not(:empty) {
display: block;
} }
.editor-header { .editor-header {
border-bottom: 1px dashed var(--docs-border, #e0e0e0); border-bottom: 1px dashed #e0e0e0;
margin-bottom: 24px; margin-bottom: 16px;
background: transparent; background: transparent !important;
} }
.editor-footer { .editor-footer {

12
ui/suite/docs/docs.html
View file

@ -489,12 +489,6 @@
<div class="docs-main"> <div class="docs-main">
<div class="docs-canvas"> <div class="docs-canvas">
<div class="editor-page" id="editorPage"> <div class="editor-page" id="editorPage">
<div
class="editor-header"
id="editorHeader"
contenteditable="true"
data-placeholder="Click to add header"
></div>
<div <div
class="editor-content" class="editor-content"
id="editorContent" id="editorContent"
@ -502,12 +496,6 @@
spellcheck="true" spellcheck="true"
data-placeholder="Start typing..." data-placeholder="Start typing..."
></div> ></div>
<div
class="editor-footer"
id="editorFooter"
contenteditable="true"
data-placeholder="Click to add footer"
></div>
</div> </div>
</div> </div>