element-hq / element-hq/element-web

New Room List: Introduce a compact mode

Open
#29,824 4 comments 6 reactions 1 assignee Claimed by @daniellekirkwood View on GitHub
A-Room-List O-Occasional T-Enhancement
Dominant language
TypeScript
Stars
13.5k
Forks
2.8k
PR merge metrics
PR metrics pending

Description

### Your use case

#### What would you like to do?

I would like an option to reduce the vertical height of each item in the new room list.

Compare this to Discord's default (non-compact) channel/room UI density (which does lack avatars):

![Image](https://github.com/user-attachments/assets/d26df95c-bbf5-45f7-8260-1ef94b188fb3)

Discord has a compact mode for their channel list, which reduces the margins around "# general":

![Image](https://github.com/user-attachments/assets/c95da3a9-d311-487a-964b-6b81e8b7207f)
![Image](https://github.com/user-attachments/assets/d661ce5f-a3fe-4a30-ac15-83707ebc6e44)

#### Why would you like to do it?

Each item has some vertical padding, and it'd be nice to have a mode where that could be eliminated for more visual density.

#### How would you like to achieve it?

Remove the vertical padding around the avatar/room name through use of a new option.

### Have you considered any alternatives?

_No response_

### Additional context

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.