fluid_layout: Fix narrow description not aligned with content.

Fixes #30619

We adjust the left margin of middle column to place the header middle
column next the left sidebar to fix the alignment issue.

web/src/realm_logo.ts

@@ -6,6 +6,7 @@ import {current_user, realm} from "./state_data.ts";
 import * as ui_util from "./ui_util.ts";
 import * as upload_widget from "./upload_widget.ts";
 import type {UploadFunction} from "./upload_widget.ts";
+import {user_settings} from "./user_settings.ts";
 
 export function build_realm_logo_widget(upload_function: UploadFunction, is_night: boolean): void {
     let logo_section_id = "#realm-day-logo-upload-widget";
@@ -87,12 +88,23 @@ export function render(): void {
         $("#realm-night-logo-upload-widget .image-block").attr("src", realm.realm_night_logo_url);
     }
 
+    const $realm_logo = $<HTMLImageElement>("#realm-navbar-wide-logo");
     if (settings_data.using_dark_theme() && realm.realm_night_logo_source !== "D") {
-        $("#realm-navbar-wide-logo").attr("src", realm.realm_night_logo_url);
+        $realm_logo.attr("src", realm.realm_night_logo_url);
     } else {
-        $("#realm-navbar-wide-logo").attr("src", realm.realm_logo_url);
+        $realm_logo.attr("src", realm.realm_logo_url);
     }
 
+    $realm_logo.on("load", () => {
+        const logo_width = $realm_logo.width();
+        if (logo_width) {
+            $("html").css(
+                "--realm-logo-current-width",
+                logo_width / user_settings.web_font_size_px + "em",
+            );
+        }
+    });
+
     change_logo_delete_button(
         realm.realm_logo_source,
         $("#realm-day-logo-upload-widget .image-delete-button"),

web/styles/app_variables.css

@@ -256,6 +256,12 @@
         20.6429em - var(--left-sidebar-right-margin)
     );
     --realm-logo-max-width: 12.5em; /* 200px at 16px em */
+    /* Value updated on realm_logo.render() */
+    --realm-logo-current-width: var(--realm-logo-max-width);
+    /* 10px is just extra margin for content separation */
+    --middle-column-left-margin-fluid-layout: calc(
+        var(--header-height) + var(--realm-logo-current-width) + 10px
+    );
     /* 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

web/styles/zulip.css

@@ -1599,6 +1599,12 @@ div.toggle_resolve_topic_spinner .loading_indicator_spinner {
         .app-main .column-middle {
             margin-left: 7px;
         }
+
+        @container header-container (width > $cq_md_min) {
+            #navbar-middle {
+                margin-left: var(--middle-column-left-margin-fluid-layout);
+            }
+        }
     }
 
     @container header-container (width < $cq_xl_min) {