Responsive UI for WhatsApp Web.

responsive-whatsapp-web.md

Responsive WhatsApp Web

Using Stylus and adding this CSS will get you a responsive UI for WhatsApp Web (which I think is long overdue, come on Meta).

@media (max-width: 747px){
     #app>div>div:last-child>header {
         display: none;
    }
     div:has( > #side):not(:hover) {
         max-width: 80px !important;
    }
     #side div:nth-child(2) {
         flex-wrap: nowrap !important;
    }
     #app>div>div:last-child{
         min-width:unset !important;
    }
     #app>div>div:last-child>div:has( > header > header) > header> header {
         display: none !important;
    }
     div:has( > #side):not(:hover) [role=gridcell]:has([aria-label~="no"]), div:has( > #side):not(:hover) [role=gridcell]:has([aria-label~="No"]) {
         display: block;
         position: relative;
         left: -36px;
    }
     [data-icon="pinned2"] {
         display:none;
    }
}

hey, thanks for sharing this!

i made a few adjustments, they may work for you too:

# profile pics fit better in the minimized side bar
-         max-width: 80px !important;
+         max-width: 98px !important;

# they seem to have added a div in-between
-     #app>div>div:last-child{
+     #app>div>div:last-child>div{

# using a non-english ui: filtering aria-label with "no" didn't work for me 
# this moves both "pinned" icons and unread message count to the left
# (i can't tell if you were filtering only for the message count etc.)
# also i find translate property slightly simpler, although neither are really future proof in this case:)
-     div:has( > #side):not(:hover) [role=gridcell]:has([aria-label~="no"]), div:has( > #side):not(:hover) [role=gridcell]:has([aria-label~="No"]) {
-         display: block;
-         position: relative;
-         left: -36px;
-    }
+     div:has(> #side):not(:hover) [role=gridcell] {
+        translate: -36px;
+     }

also, regarding:

     [data-icon="pinned2"] {
         display:none;
    }

i don't want to hide the pinned icons, but if you still do: the current icon name appears to be pin-refreshed-thin.
so i guess you could also hide all icons that contain the word "pin" like this:

/* in "mobile" view, inside the sidebar and when it's not hovered */
    [data-icon*="pin"] { /* ... */ }

Thanks! I didn't think this would still work with the new style.