diff --git a/server/src/dashboard.html b/server/src/dashboard.html index 701c174..b639bb1 100644 --- a/server/src/dashboard.html +++ b/server/src/dashboard.html @@ -105,8 +105,9 @@ } .main-container { display: flex; + flex-direction: column; flex: 1; - gap: 20px; + gap: 10px; min-height: 0; } .panel { @@ -127,9 +128,11 @@ padding-bottom: 10px; } .graph-panel { - flex: 2; + flex: 1; position: relative; overflow: hidden; + display: flex; + flex-direction: column; } /* Filter Bar */ @@ -225,17 +228,58 @@ border-bottom: 1px solid var(--border-color); } + .tabs { + display: flex; + gap: 5px; + margin-bottom: 10px; + border-bottom: 1px solid var(--border-color); + padding-bottom: 5px; + } + .tab-button { + padding: 8px 16px; + background: var(--panel-bg); + border: 1px solid var(--border-color); + border-bottom: none; + border-radius: 4px 4px 0 0; + color: var(--text-color); + cursor: pointer; + opacity: 0.7; + } + .tab-button.active { + opacity: 1; + background: var(--bg-color); + font-weight: bold; + border-bottom: 1px solid var(--bg-color); + margin-bottom: -6px; + } + .tab-content { + display: none; + height: 100%; + flex-direction: column; + flex: 1; + } + .tab-content.active { + display: flex; + } .right-column { flex: 1; display: flex; flex-direction: column; - gap: 20px; min-width: 300px; min-height: 0; } + .right-column-panels { + flex: 1; + display: flex; + flex-direction: column; + gap: 20px; + overflow-y: auto; + } .search-panel { flex: 1; min-height: 0; + display: flex; + flex-direction: column; } input[type="text"] { width: 100%; @@ -370,8 +414,9 @@ } .activity-panel { - height: 180px; - margin-top: 20px; + flex: 1; + display: flex; + flex-direction: column; } #activity-feed { overflow-y: auto; @@ -407,42 +452,50 @@