diff --git a/frontend/src/container/LogsContextList/LogsContextList.styles.scss b/frontend/src/container/LogsContextList/LogsContextList.styles.scss index 18bb285140..1b160a65ab 100644 --- a/frontend/src/container/LogsContextList/LogsContextList.styles.scss +++ b/frontend/src/container/LogsContextList/LogsContextList.styles.scss @@ -3,34 +3,30 @@ .show-more-button { position: absolute; - z-index: 1; opacity: 1; + z-index: 1; + + cursor: pointer; &.up { - top: 0; + top: -1px; + left: -1px; } &.down { - bottom: 0; + bottom: -1px; + left: -1px; + } + + &.disabled { + cursor: not-allowed; } } .virtuoso-list { &::-webkit-scrollbar { - width: 0.1rem; - height: 0.1rem; - } - } - - &.logs-context-list-asc { - .virtuoso-list { - padding-top: 16px; - } - } - - &.logs-context-list-desc { - .virtuoso-list { - padding-bottom: 16px; + width: 0.3rem; + height: 0.3rem; } } } diff --git a/frontend/src/container/LogsContextList/ShowButton.styles.scss b/frontend/src/container/LogsContextList/ShowButton.styles.scss index ee765f5c08..408847e10f 100644 --- a/frontend/src/container/LogsContextList/ShowButton.styles.scss +++ b/frontend/src/container/LogsContextList/ShowButton.styles.scss @@ -1,31 +1,31 @@ .show-more-button { - background-color: var(--bg-slate-400); - color: var(--bg-vanilla-100); - display: flex; - padding: 4px 8px; - align-items: center; - gap: 3px; - border: none; - margin: 0; + background-color: var(--bg-slate-400); + color: var(--bg-vanilla-100); + display: flex; + padding: 4px 8px; + align-items: center; + gap: 3px; + border: none; + margin: 0; } .show-more-button { - &.disabled { - background-color: var(--bg-slate-200); - color: var(--bg-vanilla-400); - } + &.disabled { + background-color: var(--bg-slate-200); + color: var(--bg-vanilla-400); + } } .lightMode { - .show-more-button { - background-color: var(--bg-vanilla-300); - color: var(--bg-slate-400); - } + .show-more-button { + background-color: var(--bg-vanilla-300); + color: var(--bg-slate-400); + } - .show-more-button { - &.disabled { - background-color: var(--bg-vanilla-300); - color: var(--bg-vanilla-400); - } - } -} \ No newline at end of file + .show-more-button { + &.disabled { + background-color: var(--bg-vanilla-300); + color: var(--bg-vanilla-400); + } + } +} diff --git a/frontend/src/container/LogsContextList/ShowButton.tsx b/frontend/src/container/LogsContextList/ShowButton.tsx index e687a5610d..814d5e8f97 100644 --- a/frontend/src/container/LogsContextList/ShowButton.tsx +++ b/frontend/src/container/LogsContextList/ShowButton.tsx @@ -41,7 +41,7 @@ function ShowButton({ onClick={onClick} icon={getIcons()} className={cx( - 'show-more-button', + 'show-more-button periscope-btn', order === ORDERBY_FILTERS.ASC ? 'up' : 'down', isDisabled && 'disabled', )} diff --git a/frontend/src/container/TracesExplorer/Controls/styles.ts b/frontend/src/container/TracesExplorer/Controls/styles.ts index f91bc43363..be74f2db18 100644 --- a/frontend/src/container/TracesExplorer/Controls/styles.ts +++ b/frontend/src/container/TracesExplorer/Controls/styles.ts @@ -5,4 +5,5 @@ export const Container = styled.div` align-items: center; justify-content: flex-end; gap: 0.5rem; + margin: 4px 0; `; diff --git a/frontend/src/pages/TracesExplorer/TracesExplorer.styles.scss b/frontend/src/pages/TracesExplorer/TracesExplorer.styles.scss index ae985deb74..5ab2bd07b2 100644 --- a/frontend/src/pages/TracesExplorer/TracesExplorer.styles.scss +++ b/frontend/src/pages/TracesExplorer/TracesExplorer.styles.scss @@ -2,6 +2,12 @@ display: flex; flex-direction: row-reverse; align-items: center; - margin: 1rem 0 0.5rem 0; + margin: 8px 16px; gap: 8px; } + +.traces-explorer-views { + .ant-tabs-tabpane { + padding: 0 8px; + } +} diff --git a/frontend/src/pages/TracesExplorer/index.tsx b/frontend/src/pages/TracesExplorer/index.tsx index 22d4b71d2e..3d39aab2cb 100644 --- a/frontend/src/pages/TracesExplorer/index.tsx +++ b/frontend/src/pages/TracesExplorer/index.tsx @@ -192,7 +192,7 @@ function TracesExplorer(): JSX.Element { - + - ; + ); }