diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index 892b70cfd4d..3d8cf15d804 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -106,6 +106,13 @@ limitations under the License. padding-right: 16px; } + &.mx_ThreadView .mx_AutoHideScrollbar { + /* the scrollbar is 8px wide, and we want a 12px gap with the side of the + panel. Hence the magic number, 8+4=12 */ + width: calc(100% - 4px); + padding-right: 4px; + } + .mx_RoomView_MessageList { padding-left: 12px; padding-right: 0; @@ -182,6 +189,7 @@ limitations under the License. .mx_MessageTimestamp { font-size: $font-12px; + color: $secondary-content; } } diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 3741afc8697..9e90e7d6eb0 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -793,7 +793,7 @@ $left-gutter: 64px; .mx_ThreadInfo_threads-amount { font-weight: 600; position: relative; - padding: 0 8px; + padding: 0 12px 0 8px; white-space: nowrap; } @@ -962,7 +962,7 @@ $left-gutter: 64px; .mx_RedactedBody, .mx_ReplyChain_wrapper { margin-left: 36px; - margin-right: 50px; + margin-right: 8px; .mx_EventTile_content, .mx_HiddenBody, @@ -974,14 +974,12 @@ $left-gutter: 64px; .mx_ReactionsRow { margin-left: 36px; - margin-right: 50px; + margin-right: 8px; } .mx_MessageTimestamp { - left: auto; - right: 2px !important; - top: 1px !important; - text-align: right; + top: 2px !important; + width: auto; } .mx_EventTile_senderDetails { diff --git a/src/components/structures/ThreadPanel.tsx b/src/components/structures/ThreadPanel.tsx index 20f4872403c..1148ee4402a 100644 --- a/src/components/structures/ThreadPanel.tsx +++ b/src/components/structures/ThreadPanel.tsx @@ -139,22 +139,23 @@ export const ThreadPanelHeaderFilterOptionItem = ({ ; }; -export const ThreadPanelHeader = ({ filterOption, setFilterOption }: { +export const ThreadPanelHeader = ({ filterOption, setFilterOption, empty }: { filterOption: ThreadFilterType; setFilterOption: (filterOption: ThreadFilterType) => void; + empty: boolean; }) => { const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu(); const options: readonly ThreadPanelHeaderOption[] = [ - { - label: _t("My threads"), - description: _t("Shows all threads you've participated in"), - key: ThreadFilterType.My, - }, { label: _t("All threads"), description: _t('Shows all threads from current room'), key: ThreadFilterType.All, }, + { + label: _t("My threads"), + description: _t("Shows all threads you've participated in"), + key: ThreadFilterType.My, + }, ]; const value = options.find(option => option.key === filterOption); @@ -179,10 +180,12 @@ export const ThreadPanelHeader = ({ filterOption, setFilterOption }: { : null; return
{ _t("Threads") } - menuDisplayed ? closeMenu() : openMenu()}> - { `${_t('Show:')} ${value.label}` } - - { contextMenu } + { !empty && <> + menuDisplayed ? closeMenu() : openMenu()}> + { `${_t('Show:')} ${value.label}` } + + { contextMenu } + }
; }; @@ -195,9 +198,8 @@ const EmptyThread: React.FC = ({ filterOption, showAllThreads return