Skip to content

Instantly share code, notes, and snippets.

@Axenide
Last active September 30, 2024 08:26
Show Gist options
  • Save Axenide/b14fff40eb1974f9268ee675e698bcc6 to your computer and use it in GitHub Desktop.
Save Axenide/b14fff40eb1974f9268ee675e698bcc6 to your computer and use it in GitHub Desktop.
Responsive UI for WhatsApp Web.

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;
    }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment