From ada3394fc9f7ab1e16ad9226c265b422248be93a Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Wed, 7 Feb 2024 12:31:29 -0600
Subject: [PATCH] Remove max width

---
 src/templates/_layouts/cp.twig     | 304 ++++++++++++++---------------
 src/web/assets/cp/src/css/_cp.scss |  11 --
 2 files changed, 150 insertions(+), 165 deletions(-)

diff --git a/src/templates/_layouts/cp.twig b/src/templates/_layouts/cp.twig
index 5e35476c0c0..0eb59adcbce 100644
--- a/src/templates/_layouts/cp.twig
+++ b/src/templates/_layouts/cp.twig
@@ -140,186 +140,182 @@ history.replaceState(undefined, undefined, window.location.href.match(/^[^#]*/)[
             {% include '_layouts/components/alerts' %}
 
             <div id="global-header" role="region" aria-label="{{ 'My Account'|t('app') }}">
-                <div class="container">
 
-                    <div class="flex flex-nowrap gap-xs">
-                        {% include '_layouts/components/crumbs' %}
-                        {% if contextMenu %}
-                            <div id="context-menu-container" class="context-menu-container">
-                                {{ contextMenu|raw }}
-                            </div>
-                        {% endif %}
-                        {{ actionMenu|raw }}
-                        <div class="flex-grow"></div>
+                <div class="flex flex-nowrap gap-xs">
+                    {% include '_layouts/components/crumbs' %}
+                    {% if contextMenu %}
+                        <div id="context-menu-container" class="context-menu-container">
+                            {{ contextMenu|raw }}
+                        </div>
+                    {% endif %}
+                    {{ actionMenu|raw }}
+                    <div class="flex-grow"></div>
+                    <button
+                        type="button"
+                        id="announcements-btn"
+                        class="btn hidden"
+                        title="{{ 'What’s New'|t('app') }}"
+                    >
+                        <span class="visually-hidden">{{ 'What’s New'|t('app') }}</span>
+                        {{ iconSvg('gift') }}
+                    </button>
+
+                    {# New account dropdown #}
+                    <div class="account-toggle-wrapper">
                         <button
-                            type="button"
-                            id="announcements-btn"
-                            class="btn hidden"
-                            title="{{ 'What’s New'|t('app') }}"
+                            id="user-info"
+                            aria-controls="account-menu"
+                            class="btn menu-toggle"
+                            aria-label="{{ 'My Account'|t('app') }}"
+                            title="{{ 'My Account'|t('app') }}"
+                            data-disclosure-trigger
                         >
-                            <span class="visually-hidden">{{ 'What’s New'|t('app') }}</span>
-                            {{ iconSvg('gift') }}
+                            {{ userPhoto|raw }}
                         </button>
-
-                        {# New account dropdown #}
-                        <div class="account-toggle-wrapper">
-                            <button
-                                id="user-info"
-                                aria-controls="account-menu"
-                                class="btn menu-toggle"
-                                aria-label="{{ 'My Account'|t('app') }}"
-                                title="{{ 'My Account'|t('app') }}"
-                                data-disclosure-trigger
-                            >
-                                {{ userPhoto|raw }}
-                            </button>
-                            <div
-                                id="account-menu"
-                                class="menu menu--disclosure"
-                                data-align="right"
-                                data-align-to=".header-photo"
-                            >
-                                <ul>
-                                    <li>
-                                        <a href="{{ url('myaccount') }}" class="flex flex-nowrap">
-                                            {% if currentUser.photoId %}
-                                                {{ userPhoto|raw }}
+                        <div
+                            id="account-menu"
+                            class="menu menu--disclosure"
+                            data-align="right"
+                            data-align-to=".header-photo"
+                        >
+                            <ul>
+                                <li>
+                                    <a href="{{ url('myaccount') }}" class="flex flex-nowrap">
+                                        {% if currentUser.photoId %}
+                                            {{ userPhoto|raw }}
+                                        {% endif %}
+                                        <div class="flex-grow">
+                                            <div>{{ currentUser.username }}</div>
+                                            {% if not craft.app.config.general.useEmailAsUsername %}
+                                                <div class="smalltext">{{ currentUser.email }}</div>
                                             {% endif %}
-                                            <div class="flex-grow">
-                                                <div>{{ currentUser.username }}</div>
-                                                {% if not craft.app.config.general.useEmailAsUsername %}
-                                                    <div class="smalltext">{{ currentUser.email }}</div>
-                                                {% endif %}
-                                            </div>
-                                        </a>
-                                    </li>
-                                </ul>
-                                <hr>
-                                <ul>
-                                    <li><a href="{{ url('logout') }}">{{ "Sign out"|t('app') }}</a></li>
-                                </ul>
-                            </div>
+                                        </div>
+                                    </a>
+                                </li>
+                            </ul>
+                            <hr>
+                            <ul>
+                                <li><a href="{{ url('logout') }}">{{ "Sign out"|t('app') }}</a></li>
+                            </ul>
                         </div>
                     </div>
                 </div>
             </div>
 
-            <div class="container">
-                <div id="main-container">
+            <div id="main-container">
 
-                    <main {{ attr(mainAttributes) }}>
+                <main {{ attr(mainAttributes) }}>
 
-                        {% if fullPageForm -%}
-                        <form {% block mainFormAttributes %}{{ attr(mainFormAttributes) }}{% endblock %}>
-                            {{- csrfInput() }}
-                            {%- endif %}
-
-                            {% if showHeader %}
-                                <div id="header-container">
-                                    <header id="header">
-                                        {% block header %}
-                                            <div id="page-title" class="flex{% if toolbar %} has-toolbar{% endif %}">
-                                                {% block pageTitle %}
-                                                    {% if title is defined and title|length %}
-                                                        <h1 class="screen-title" title="{{ title }}">{{ title }}</h1>
-                                                    {% endif %}
-                                                {% endblock %}
+                    {% if fullPageForm -%}
+                    <form {% block mainFormAttributes %}{{ attr(mainFormAttributes) }}{% endblock %}>
+                        {{- csrfInput() }}
+                        {%- endif %}
+
+                        {% if showHeader %}
+                            <div id="header-container">
+                                <header id="header">
+                                    {% block header %}
+                                        <div id="page-title" class="flex{% if toolbar %} has-toolbar{% endif %}">
+                                            {% block pageTitle %}
+                                                {% if title is defined and title|length %}
+                                                    <h1 class="screen-title" title="{{ title }}">{{ title }}</h1>
+                                                {% endif %}
+                                            {% endblock %}
+                                        </div>
+                                        {% if toolbar %}
+                                            <div id="toolbar" class="flex">
+                                                {{ toolbar|raw }}
                                             </div>
-                                            {% if toolbar %}
-                                                <div id="toolbar" class="flex">
-                                                    {{ toolbar|raw }}
-                                                </div>
-                                            {% endif %}
-                                            {% if actionButton or additionalButtons %}
-                                                <div id="action-buttons" class="flex">
-                                                    {{ additionalButtons|raw }}
-                                                    {{ actionButton|raw }}
-                                                </div>
-                                            {% endif %}
-                                        {% endblock %}
-                                    </header><!-- #header -->
+                                        {% endif %}
+                                        {% if actionButton or additionalButtons %}
+                                            <div id="action-buttons" class="flex">
+                                                {{ additionalButtons|raw }}
+                                                {{ actionButton|raw }}
+                                            </div>
+                                        {% endif %}
+                                    {% endblock %}
+                                </header><!-- #header -->
+                            </div>
+                        {% endif %}
+
+                        <div id="main-content" class="{{ mainContentClasses|join(' ') }}">
+                            {# sidebar #}
+                            {% if sidebar %}
+                                <div id="sidebar-toggle-container">
+                                    <button
+                                        type="button"
+                                        id="sidebar-toggle"
+                                        class="btn menubtn"
+                                        aria-controls="sidebar-container"
+                                        aria-expanded="false"
+                                    >
+                                        {{ 'Show sidebar'|t('app') }}
+                                    </button>
+                                </div>
+                                <div id="sidebar-container">
+                                    <div id="sidebar" class="sidebar">
+                                        {{ sidebar|raw }}
+                                    </div>
                                 </div>
                             {% endif %}
 
-                            <div id="main-content" class="{{ mainContentClasses|join(' ') }}">
-                                {# sidebar #}
+                            {# content-container #}
+                            <div id="content-container">
                                 {% if sidebar %}
-                                    <div id="sidebar-toggle-container">
-                                        <button
-                                            type="button"
-                                            id="sidebar-toggle"
-                                            class="btn menubtn"
-                                            aria-controls="sidebar-container"
-                                            aria-expanded="false"
-                                        >
-                                            {{ 'Show sidebar'|t('app') }}
-                                        </button>
-                                    </div>
-                                    <div id="sidebar-container">
-                                        <div id="sidebar" class="sidebar">
-                                            {{ sidebar|raw }}
-                                        </div>
-                                    </div>
+                                    <h2 id="content-heading"></h2>
                                 {% endif %}
-
-                                {# content-container #}
-                                <div id="content-container">
-                                    {% if sidebar %}
-                                        <h2 id="content-heading"></h2>
+                                {% block main %}
+                                    {% if errorSummary is not empty %}
+                                        {{ errorSummary is defined ? errorSummary|raw }}
                                     {% endif %}
-                                    {% block main %}
-                                        {% if errorSummary is not empty %}
-                                            {{ errorSummary is defined ? errorSummary|raw }}
+                                    <div id="content" class="content-pane">
+                                        {% if contentNotice or tabs %}
+                                            <header id="content-header" class="pane-header">
+                                                {{ contentNotice ? tag('div', {
+                                                    id: 'content-notice',
+                                                    html: contentNotice,
+                                                    role: 'status',
+                                                }) }}
+                                                {% if tabs %}
+                                                    {% include "_includes/tabs" with {
+                                                        containerAttributes: {
+                                                            id: 'tabs',
+                                                        },
+                                                    } %}
+                                                {% endif %}
+                                            </header>
                                         {% endif %}
-                                        <div id="content" class="content-pane">
-                                            {% if contentNotice or tabs %}
-                                                <header id="content-header" class="pane-header">
-                                                    {{ contentNotice ? tag('div', {
-                                                        id: 'content-notice',
-                                                        html: contentNotice,
-                                                        role: 'status',
-                                                    }) }}
-                                                    {% if tabs %}
-                                                        {% include "_includes/tabs" with {
-                                                            containerAttributes: {
-                                                                id: 'tabs',
-                                                            },
-                                                        } %}
-                                                    {% endif %}
-                                                </header>
-                                            {% endif %}
-
-                                            {% block content %}
-                                                {{ content is defined ? content|raw }}
-                                            {% endblock %}
 
-                                            {# footer #}
-                                            {% if footer %}
-                                                <div id="footer" class="flex flex-justify">
-                                                    {{ footer|raw }}
-                                                </div>
-                                            {% endif %}
-                                        </div>
-                                    {% endblock %}
-                                </div><!-- #content-container -->
+                                        {% block content %}
+                                            {{ content is defined ? content|raw }}
+                                        {% endblock %}
 
-                                {% if details is not empty %}
-                                    <div id="details-container">
-                                        <div id="details">
-                                            <div class="details">
-                                                {{ details|raw }}
+                                        {# footer #}
+                                        {% if footer %}
+                                            <div id="footer" class="flex flex-justify">
+                                                {{ footer|raw }}
                                             </div>
+                                        {% endif %}
+                                    </div>
+                                {% endblock %}
+                            </div><!-- #content-container -->
+
+                            {% if details is not empty %}
+                                <div id="details-container">
+                                    <div id="details">
+                                        <div class="details">
+                                            {{ details|raw }}
                                         </div>
                                     </div>
-                                {% endif %}
-                            </div><!-- #main-content -->
+                                </div>
+                            {% endif %}
+                        </div><!-- #main-content -->
 
-                            {% if fullPageForm -%}
-                        </form><!-- #main-form -->
-                        {%- endif %}
-                    </main><!-- #main -->
-                </div><!-- #main-container -->
-            </div><!-- .container -->
+                        {% if fullPageForm -%}
+                    </form><!-- #main-form -->
+                    {%- endif %}
+                </main><!-- #main -->
+            </div><!-- #main-container -->
 
             <footer id="global-footer">
                 {% if trialInfo %}
diff --git a/src/web/assets/cp/src/css/_cp.scss b/src/web/assets/cp/src/css/_cp.scss
index aa86d6877de..f30bac07d54 100644
--- a/src/web/assets/cp/src/css/_cp.scss
+++ b/src/web/assets/cp/src/css/_cp.scss
@@ -23,7 +23,6 @@ $badgeColor: var(--gray-800);
   --neg-padding: calc(var(--padding) * -1);
   --sidebar-width: #{$sidebarWidth};
   --global-sidebar-width: #{$sidebarWidth};
-  --max-width: 1920px;
 }
 
 html {
@@ -274,10 +273,6 @@ $systemInfoHoverBgColor: darken($grey800, 10%);
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-
-  & > .container {
-    flex: 1;
-  }
 }
 
 #alerts {
@@ -1697,9 +1692,3 @@ li.breadcrumb-toggle-wrapper {
     }
   }
 }
-
-.container {
-  width: 100%;
-  max-width: var(--max-width);
-  margin: 0 auto;
-}