Repository navigation
A few custom theme hacks for improving Inbox Favourites (max-height, scrollable, reduce avatar size, etc) and other things that frustrate me with Beeper's UI/UX #6
Description
A few of my custom theme hacks for improving Inbox Favourites (max-height, scrollable, reduce avatar size, etc):
Announcement tweet: https://twitter.com/_devalias/status/1651766148046921728
Reddit thread: https://www.reddit.com/r/beeper/comments/13cezdc/beeper_ui_ux_hacksimprovements_via_custom_themes/
Snapshot of gist contents at time of posting this issue follows...
Improving UI/UX for users with lots of favourites
(Reported to Beeper Support as DES-10976 (and probably at least one other time before that))
Reduces the size of the user avatars in the favourites section of the unified inbox, sets a max-height to the favourites area, and makes the overflow vertically scrollable.
/* Inbox - Favourites */
.rooms > .favourites {
/* Custom Variables */
--devalias-fav-section-max-height: 30vh;
--devalias-fav-width: 40px;
--devalias-fav-height: 40px;
--devalias-fav-avatar-width: 30px;
--devalias-fav-avatar-height: 30px;
--devalias-fav-avatar-font-size: 17px;
}
/* .bp_LeftPanel .rooms .favourites__icons {
TODO: This is where display: grid is set.. can we somehow make it more compact so it automagically fits the tiles on the row as space allows?
}*/
.rooms > .favourites > .favourites__icons > .favourites__tiles {
max-height: var(--devalias-fav-section-max-height, none) !important;
overflow: auto;
}
.rooms > .favourites > .favourites__icons > .favourites__tiles > .favourites__row > span {
--fav-width: var(--devalias-fav-width, 40px) !important;
}
.bp_LeftPanel .rooms .favourites_avatar {
height: var(--devalias-fav-height, 60px) !important;
}
.bp_LeftPanel .rooms .favourites .bp_RoomTile.small {
height: var(--devalias-fav-height, 48px) !important;
}
.bp_LeftPanel .rooms .favourites .bp_RoomTile.small .mx_BaseAvatar_image {
width: var(--devalias-fav-avatar-width, 44px) !important;
height: var(--devalias-fav-avatar-height, 44px) !important;
}
.bp_LeftPanel .rooms .favourites .bp_RoomTile.small .mx_BaseAvatar_initial {
font-size: var(--devalias-fav-avatar-font-size, 19.8px) !important;
width: var(--devalias-fav-avatar-width, 44px) !important;
line-height: var(--devalias-fav-avatar-width, 44px) !important;
}
.bp_LeftPanel .rooms .favourites .bp_RoomTile.small .outline .outline-details {
width: var(--devalias-fav-width, var(--fav-width, 45px)) !important;
}|
Before: Inbox is flooded by favourites |
After: ✨👌 |
|
|
|
Improving UI/UX with the Custom CSS TextArea
(Reported to Beeper Support as DES-10977)
/* Custom CSS TextArea */
.mx_AppearanceUserSettingsTab .mx_Field.mx_Field_textarea {
width: 100% !important;
height: 500px !important;
}| Before: Textarea is tiny and squashed and barely usable | After: The textarea expands to take up a decent/usable amount of the available space |
|---|---|
 |
 |
Activity
0xdevalias commentedon May 1, 2023
Add an 'external link' icon next to the 'Chat Networks' 'tab' in the main 'Settings' dialog
Updated to also add an 'external link' icon next to the 'Chat Networks' 'tab' in the main 'Settings' dialog:
Before:
After:
This is a hacky workaround for Beeper bug report
DES-10656, implementing option 3:0xdevalias commentedon May 4, 2023
Reduce the 'in your face' bright/colourful/'glare' from the network icons on the new 'View Space Bar in side panel' lab
(Edit: There is a variation on this tweak/workaround documented below (Ref), that allows replacing these new icons with the old lineart icons)
Added a new tweak to reduce the 'in your face' bright/colourful/'glare' from the network icons on the new 'View Space Bar in side panel' lab:
[-]A few custom theme hacks for improving Inbox Favourites (max-height, scrollable, reduce avatar size, etc)[/-][+]A few custom theme hacks for improving Inbox Favourites (max-height, scrollable, reduce avatar size, etc) and other things that frustrate me with Beeper's UI/UX[/+]0xdevalias commentedon May 4, 2023
Add the 🔗 emoji after the 'Chat Networks' item in the main settings menu + remove extra noise from settings menu
A variation on #6 (comment) that was requested by a user in the 'Beeper Community' chat, which adds the 🔗 emoji after the 'Chat Networks' item in the main settings menu as well:
Though for my personal needs.. why don't we just remove all of those extra/annoying/cluttering buttons entirely!
0xdevalias commentedon May 4, 2023
From 'Beeper Community' channel, exploring the possibility of hacking the new 'beeper space bar' to make use of the old chat network icons as a variation to #6 (comment):
0xdevalias commentedon May 9, 2023
Remove the 'Archive' button from the new 'beeper spaces sidebar'
Further 'beeper space sidebar' customisations/hacks, based on a request in 'Beeper Community' channel:
0xdevalias commentedon May 9, 2023
Hide the floating 'Archived' and 'Sweep' buttons in the new 'beeper space sidebar'
(Reported to Beeper Support as
DES-10914)With the new 'beeper space sidebar', when it's collapsed, we can hide the floating 'Archived' and 'Sweep' buttons (and some empty divs that block selecting chats around that area) as follows:
Edit: Contribution from
@ashirbhallalevine:beeper.comin Beeper Community chat:0xdevalias commentedon May 9, 2023
Change the network icons in the new 'beeper space sidebar' to use the old lineart icons
Beeper Support Report
Reported to Beeper Support as
DES-10915CSS Hacks
@tobiah:beeper.com)Following on from my initial research above (Ref), here is how we can change the network icons in the new 'beeper space sidebar' to use the old lineart icons instead.
The following is a basic example, using the 'archive' as an example; but similar rules could be written to target all of the networks:
This is a (probably non-exhaustive) list of the new icons that can be targeted (as above example) to be replaced:
This is a (probably non-exhaustive) list of the lineart icons that can be used (as above example) as replacements:
So you could replace all icons on the space sidebar with something like this:
IMO it's probably nicer to keep the 'original' new icons for the following though:
So we could modify our main 'hide original icons' CSS theme hack as follows, and then remove the extra rules from the above code that were setting the lineart svg's for these buttons:
Which will then end up looking something more like this ('second variation'), which IMO looks much nicer all around:
0xdevalias commentedon May 18, 2023
With the 'new' 'Beeper Space Sidebar', hide the floating 'open archive' button, and always show the floating 'Archive All Read Messages' button
Beeper Support Report
Reported to Beeper Support as
DES-11233:CSS Hacks
Updates:
Caveats
The release notes that introduced this change stated that the 'Archive All Read Messages' button would only be visible when there were actually message that it could archive. I didn't test if that was true, but if it was, the CSS hacks here in their current form may break that aspect, and just make it always visible.
Screenshots
Before
Inbox with Sidebar Collapsed, Not Hovering
Inbox with Sidebar Collapsed, Hovering 'Open Archive'
Inbox with Sidebar Collapsed, Hovering 'Archive All Read Messages'
Inbox with Sidebar Opened, Not Hovering
Inbox with Sidebar Opened, Hovering
After
Inbox with Sidebar Collapsed, Not Hovering
Inbox with Sidebar Collapsed, Hovering 'Open Archive'
N/A, it's hidden now
Inbox with Sidebar Collapsed, Hovering 'Archive All Read Messages'
Inbox with Sidebar Opened, Not Hovering
Inbox with Sidebar Opened, Hovering
0xdevalias commentedon May 18, 2023
Bonus Hacks - Accessing the React internals for the Beeper 'Rooms' component using Beeper / Electron's DevTools
0xdevalias commentedon May 25, 2023
Reduce the size of the 'new' 'Beeper Space Sidebar' + it's 'chat network' buttons
Background Context
Based on a user request in 'Beeper Community' chat, here are some quick (unrefined, could definitely be improved upon, particularly the CSS selectors used for targeting the elements) hacks for reducing/changing the size of the new 'Beeper Sidebar', and the network icons within it.
Beeper Support Report
N/A
Caveats
These are very quick/hacky rules (I would probably figure better CSS selectors for them since currently they are based on the CSS-in-JS selectors that are almost certainly going to change with future Beeper release versions.. but it might work well enough), and without spending much time tweaking the actual sizes to be 'just right' (as not really sure what would work best for you), here are some CSS hacks to mess around with the sidebar network icon sizes (you may need to use
!importanton some of the rules if they don't work directly when added to the 'custom CSS' section; I'm hacking these in devtools atm)CSS Hacks
Screenshots
It's a little hard to see the side by side in these images.. but notice how the 'Before' sidebar extends for '6 favourites + 6.5 chats' of height, whereas the 'After' only extends of '6 favourites + 3 chats' of height.
0xdevalias commentedon May 30, 2023
Hide Left Panel/Sidebar While Chat Is Open
Background Context
Based on a user request in 'Beeper Community' chat:
Beeper Support Report
N/A
Caveats
N/A
CSS Hacks
Screenshots
Before
Beeper's inbox/side panel are visible whether a chat is open or closed:
After
Beeper's inbox/side panel are visible only when a chat is closed:
Chat Open:
Chat Closed:
0xdevalias commentedon Jun 5, 2023
Change the
min-widthof the Left 'Inbox' Side PanelVia
@ashirbhallalevine:beeper.comon Beeper Community chat:0xdevalias commentedon Jun 5, 2023
Ensure full image preview is visible, rather than a zoomed part of it
Background Context
It annoyed me when images shared in chats with a certain aspect ratio ended up getting zoomed in to fill the space (and looking super weird in the process), rather than just being scaled down and showing the full content.
Beeper Support Report
N/A
Caveats
N/A
CSS Hacks
Screenshots
Before
After
0xdevalias commentedon Jun 9, 2023
Change the colours of existing
svgimages embedded in the DOMThe following comes from a request from the Beeper Community chat.
Extends from some of the original sidebar work in: #6 (comment)
The following rules allow you to target each
pathwithin ansvgembedded in the DOM of the page, and then use CSS to customise properties like the colours/etc of the paths within that vector image.For example, this changes the 'inbox' icon on the sidebar to be red and green (rather than it's default white/grey):
You could similarly target and customise other
svgbased images where thesvgis directly embedded in the DOM.Before:
After:
8 remaining items
j0lol commentedon Aug 13, 2023
Updated here for web users: https://userstyles.world/style/11528/beeper-compact-sidebar and the gist is still updated for desktop users :)
eigenstil commentedon Aug 24, 2023
This doesn't seem to work properly anymore. The height of the avatars are changing, but this results in a lot of whitespace beetween the rows now. When I add this line to the code it starts working (but with some overlapping which could be fixed by tweaking all the other values):
ShakeebIVIS commentedon May 30, 2024
Amazing! That's a lot of good hacks. Any idea how to change the Beeper app Icon? The Beeper AppImage icon is ugly.
0xdevalias commentedon May 30, 2024
@ShakeebIVIS Sounds like it's something that likely isn't customizable from CSS/etc:
duoi commentedon Jun 11, 2024
WhatsApp-like coloring of names in group conversations rather than coloring the message box:
0xdevalias commentedon Mar 1, 2025
Beeper Desktop v4 Beta CSS Hack, making the pinned/favourites section height limited, scrollable, and with smaller avatar bubbles:
This is the start of porting the CSS hacks I use from Desktop V3 to V4. You can find more of my legacy explorations on this gist:
Edit: See #6 (comment) for a modified version of this that works with Beeper Desktop v4.0.821
0xdevalias commentedon Apr 25, 2025
Beeper Desktop V4 CSS Hack to make pinned/favourite threads respect the 'unread' filter:
Original / Legacy / Outdated CSS
Original:
Edit (2025-12-22):
Edit (2026-03-05):
Edit (2026-07-21): After reading @PockyBum522's comment below I tried disabling this CSS hack, and seems like at some point they made it a default feature (tested on
v4.2.985); so this may no longer be required.finnjosten commentedon Jun 17, 2025
#6 (comment)
Should work the exact same just quite a bit smaller
0xdevalias commentedon Jul 9, 2025
Beeper Desktop v4.0.821(+?) CSS Hack, making the pinned/favourites section height limited, scrollable, and with smaller avatar bubbles (updated for v4.3.34)
The latest version of my tweaks from #6 (comment), since Desktop v4.0.821 seemed to break the previous ones:
Edit (2026-08-17, tested on v4.3.34): Comparing Beeper Desktop v4.3.20 with v4.3.34, the pinned-avatar sizing variable used by Beeper changed from
--avatar-sizeto--pinned-avatar-size. The CSS below now uses the new variable name directly.You can find more of my CSS hacks on this gist:
0xdevalias commentedon Jun 18, 2026
Mute colourised network icons in the Beeper Desktop v4 inbox and composer
Background Context
In Beeper Desktop v4.2.605, the colourised network icons in the inbox chat list and message composer can be visually loud compared with the rest of the UI. This CSS keeps the icons visible, but reduces saturation/opacity so they do not dominate the interface.
Related older space/sidebar network-icon tweaks:
Beeper Support Report
Raised this issue as
DESK-27924CSS Hacks
Caveats
These selectors rely on Beeper Desktop v4.2.605 class names and may need updating after UI changes. The
:not(.is-badge)guard intentionally avoids muting badge-style icons.PockyBum522 commentedon Jul 20, 2026
Thank you for the start to get to what I wanted. Disclaimer: I know little about CSS, use at your own risk. Open to suggestions. I just hacked away until things worked how I wanted.
The Beeper linux desktop client, until a few months ago, always showed pinned contacts even when in unread filter mode. I basically only used unread filter because it was extremely nice having everything read disappear so I know what I still need to get to, but always having pinned contacts that I use frequently as a speed dial if I need to respond to someone I talk to often without having them be unread at that very moment.
Then they changed it so unread only shows unread. Great, does what it says on the tin, but not helpful to how I was using it. Playing around with some of the CSS in here, I've gotten inbox view back to working like that.
Verified working on v4.2.985
Show only all pinned contacts (even when read) AND unread messages in inbox
If anyone knows how to apply this only when in unread filter, that would be awesome, but it looks to me like that mode filters out pinned before CSS is applied.
0xdevalias commentedon Jul 21, 2026
@PockyBum522 Not sure about the linux version, as I'm on macOS; and I haven't looked too deeply as to whether there are configurable settings for it; but I pretty much had a CSS hack explicitly to make it that way (and my feedback might have led to getting it changed potentially... 😅)
I just tried disabling it, and it seems that you're correct, and it is just handled natively these days.
@PockyBum522 I had a quick look, and it does look like they're filtered out at the DOM level, so I think you're correct that CSS alone may not be able to help here.
If you wanted it to just always operate in this 'unread mode' then you could essentially use CSS to make it act like the unread filter was active even when it isn't; that might be the quickest/closest way to get to the UX you're after?
PockyBum522 commentedon Jul 22, 2026
@0xdevalias Ah so you're my arch nemesis ;)
The CSS I posted makes the inbox behave how I want, with pinned always shown and beyond that only unread shown (Plus currently selected message, for convenience, since it becomes unread once selected.)
If you can think of a clearer way to phrase the title I put for it, lmk.
Thank you for confirming that I can't make unread filter behave how I want, I figured that based on what I was seeing, but I'm happy with how I have the inbox behaving now, with the CSS I posted.
0xdevalias commentedon Jul 24, 2026
@PockyBum522 😅😆✌️
@PockyBum522 Awesome, glad to hear it :)
@PockyBum522 Maybe just dropping the 'only'?
0xdevalias commentedon Sep 19, 2026
Differentiate message editing without blur in Beeper Desktop v4
Background Context
I first noticed on Beeper Desktop v4.3.123 that editing a message blurs the main conversation. I am not certain which version introduced this behaviour.
I understand the intent: make it more obvious that a message is being edited rather than composed normally. In practice, however, the blur is actively harmful to the editing UX because it prevents me from reading nearby messages that may provide context for the edits I need to make. I consider this a UX regression. If the blur needs to remain for users who find it valuable, an option to disable it would be useful.
This CSS provides a less disruptive edit state. It removes the backdrop blur, uses grayscale to mute the conversation while leaving nearby messages readable, and adds an explicit
EDITING…tab attached to the composer instead of relying on ambiguous visual cues.Beeper Support Report
Raised this issue as
DESK-31067:Caveats
This CSS does not attempt to remove the full-conversation overlay that blocks scrolling while a message is being edited, and I have not investigated whether that overlay can also be removed. Its current scope is to make nearby messages readable again and make the editing state explicit without using blur.
These selectors and custom properties were tested with Beeper Desktop v4.3.123 and may need updating if the relevant DOM structure or styles change. The
--edit-tab-left: 65pxpositioning is tuned for the current composer layout and may need adjustment for other layouts or future versions. Applyinggrayscale(75%)intentionally affects the entire conversation pane while editing, including images and other coloured content.CSS Hacks
Screenshots
Normal conversation (not editing)
Default editing state (blurred conversation)
Custom CSS editing state (readable conversation with explicit editing indicator)