mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-16 12:10:28 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix menus congestion and improve thread reply layout (#2402)

Browse source 
* make menus more spacious

* improve threaded reply layout

* fix search filter button spacing
This commit is contained in:
Ajay Bura 2025-07-27 17:50:23 +05:30 • committed by GitHub
parent 9183fd66b2
commit d8d4714370
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
37 changed files with 82 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app/features/room/RoomInput.tsx
View file

@ -543,7 +543,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
>
<Icon src={Icons.Cross} size="50" />
</IconButton>
<Box direction="Column">
<Box direction="Row" gap="200" alignItems="Center">
{replyDraft.relation?.rel_type === RelationType.Thread && <ThreadIndicator />}
<ReplyLayout
userColor={replyUsernameColor}

8
src/app/features/room/RoomViewHeader.tsx
View file

@ -108,8 +108,8 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
};
return (
<Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
<Menu ref={ref} style={{ minWidth: toRem(200) }}>
<Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
<MenuItem
onClick={handleMarkAsRead}
size="300"
@ -144,7 +144,7 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
</RoomNotificationModeSwitcher>
</Box>
<Line variant="Surface" size="300" />
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
<Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
<MenuItem
onClick={handleInvite}
variant="Primary"
@ -207,7 +207,7 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
</UseStateProvider>
</Box>
<Line variant="Surface" size="300" />
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
<Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
<UseStateProvider initial={false}>
{(promptLeave, setPromptLeave) => (
<>

10
src/app/features/room/message/Message.tsx
View file

@ -22,6 +22,7 @@ import {
as,
color,
config,
toRem,
} from 'folds';
import React, {
FormEventHandler,
@ -94,10 +95,10 @@ export const MessageQuickReactions = as<'div', MessageQuickReactionsProps>(
return (
<>
<Box
style={{ padding: config.space.S200 }}
style={{ padding: config.space.S300 }}
alignItems="Center"
justifyContent="Center"
gap="200"
gap="300"
{...props}
ref={ref}
>
@ -972,7 +973,7 @@ export const Message = as<'div', MessageProps>(
escapeDeactivates: stopPropagation,
}}
>
<Menu>
<Menu style={{ minWidth: toRem(200) }}>
{canSendReaction && (
<MessageQuickReactions
onReaction={(key, shortcode) => {
@ -1169,6 +1170,7 @@ export const Event = as<'div', EventProps>(
hideReadReceipts,
showDeveloperTools,
children,
style,
...props
},
ref
@ -1235,7 +1237,7 @@ export const Event = as<'div', EventProps>(
escapeDeactivates: stopPropagation,
}}
>
<Menu {...props} ref={ref}>
<Menu style={{ minWidth: toRem(200), ...style }} {...props} ref={ref}>
<Box direction="Column" gap="100" className={css.MessageMenuGroup}>
{!hideReadReceipts && (
<MessageReadReceiptItem

2
src/app/features/room/message/styles.css.ts
View file

@ -30,7 +30,7 @@ export const MessageQuickReaction = style({
});
export const MessageMenuGroup = style({
padding: config.space.S100,
padding: config.space.S200,
});
export const MessageMenuItemText = style({