left_sidebar: Size left sidebar to accomodate font, screen sizes.

web/styles/app_variables.css

@@ -237,7 +237,14 @@
     /* space direct message / stream / topic names from unread counters
     and @ mention indicators by 3px on the right */
     --left-sidebar-before-unread-count-padding: 3px;
-    --left-sidebar-width: 270px;
+    /* 334px at 15px/1em */
+    --left-sidebar-max-width: 22.6667em;
+    /* Sidebar width is 1/3 of the screen at smaller
+       sizes, but gets held to the left sidebar's max width.
+       This is very useful for areas in the CSS codebase
+       that rely on this value, but not necessarily as
+       applied to `width:` or `max-width:`. */
+    --left-sidebar-width: min(33.3333%, var(--left-sidebar-max-width));
     /* 40px (toggle icon) + 5px (gap) + 20px logo + 10px right margin */
     --left-sidebar-width-with-realm-icon-logo: 75px;
     --right-sidebar-width: 250px;

web/styles/zulip.css

@@ -1777,6 +1777,10 @@ div.toggle_resolve_topic_spinner .loading_indicator_spinner {
         display: none;
 
         &.expanded {
+            /* In the extended state, we open the sidebar
+               to its maximum possible size (otherwise, it
+               would be unnecessarily too narrow). */
+            --left-sidebar-width: var(--left-sidebar-max-width);
             display: block;
             position: absolute;
             float: none;