Adapt desktop breakpoints in views (#3358)

* Add XXL breakpoint

* Unify setup guide display

* Adapt desktop breakpoints in views

* Fix POS code display

* Fix syntax in home view

* store settings + constrain update

* account settings

Co-authored-by: dstrukt <gfxdsign@gmail.com>
Co-authored-by: Nicolas Dorier <nicolas.dorier@gmail.com>

BTCPayServer/Views/Shared/EmailsBody.cshtml

@@ -1,7 +1,7 @@
 @model BTCPayServer.Models.ServerViewModels.EmailsViewModel
 
 <div class="row">
-    <div class="col-lg-6">
+    <div class="col-xl-8 col-xxl-constrain">
         <div class="d-flex align-items-center justify-content-between mb-4">
             <h3 class="mb-0">@ViewData["Title"]</h3>
             <div class="dropdown only-for-js" id="quick-fill">
@@ -22,7 +22,7 @@
 
 <form method="post" autocomplete="off">
     <div class="row">
-        <div class="col-lg-6">
+        <div class="col-xl-8 col-xxl-constrain">
             @if (!ViewContext.ModelState.IsValid)
             {
                 <div asp-validation-summary="All" class="text-danger"></div>
@@ -80,7 +80,7 @@
         </div>
     </div>
     <div class="row">
-        <div class="col-md-6">
+        <div class="col-xl-8 col-xxl-constrain">
             <div class="form-group">
                 <h3 class="mt-5 mb-3">Testing</h3>
                 <p>

BTCPayServer/Views/UIApps/CreateApp.cshtml

@@ -12,7 +12,7 @@
 <h2 class="mt-1 mb-4">@ViewData["Title"]</h2>
 
 <div class="row">
-    <div class="col-lg-6">
+    <div class="col-xl-8 col-xxl-constrain">
         <form asp-action="CreateApp">
             <div asp-validation-summary="ModelOnly" class="text-danger"></div>
             <div class="form-group">

BTCPayServer/Views/UIApps/UpdateCrowdfund.cshtml

@@ -23,7 +23,7 @@
     <div asp-validation-summary="ModelOnly" class="text-danger"></div>
 
     <div class="row">
-        <div class="col-lg-6">
+        <div class="col-xl-8 col-xxl-constrain">
             <div class="form-group">
                 <label asp-for="AppName" class="form-label" data-required></label>
                 <input asp-for="AppName" class="form-control" required />
@@ -40,14 +40,14 @@
                 <span asp-validation-for="Tagline" class="text-danger"></span>
             </div>
         </div>
-        <div class="col-lg-9">
+        <div class="col-xl-10 col-xxl-constrain">
             <div class="form-group">
                 <label asp-for="Description" class="form-label" data-required></label>
                 <textarea asp-for="Description" rows="20" cols="40" class="form-control richtext"></textarea>
                 <span asp-validation-for="Description" class="text-danger"></span>
             </div>
         </div>
-        <div class="col-lg-6">
+        <div class="col-xl-8 col-xxl-constrain">
             <div class="form-group">
                 <label asp-for="TargetCurrency" class="form-label"></label>
                 <input asp-for="TargetCurrency" class="form-control" placeholder="Use store's default settings" />
@@ -106,10 +106,10 @@
                 <div class="text-muted" hidden="@(!Model.Enabled)">The crowdfund is visible to anyone. To make it only visible to you, disable this.</div>
             </div>
         </div>
-        <div class="col-lg-12">
+        <div class="col-xxl-constrain">
             <partial name="TemplateEditor" model="@(nameof(Model.PerksTemplate), "Perks")" />
         </div>
-        <div class="col-lg-6">
+        <div class="col-xl-8 col-xxl-constrain">
             <div class="form-group">
                 <label asp-for="PerksTemplate" class="form-label"></label>
                 <textarea asp-for="PerksTemplate" rows="10" cols="40" class="js-product-template form-control"></textarea>

BTCPayServer/Views/UIApps/UpdatePointOfSale.cshtml

@@ -14,7 +14,7 @@
     <div asp-validation-summary="ModelOnly" class="text-danger"></div>
 
     <div class="row">
-        <div class="col-lg-6">
+        <div class="col-xl-8 col-xxl-constrain">
             <div class="form-group">
                 <label asp-for="AppName" class="form-label" data-required></label>
                 <input asp-for="AppName" class="form-control" required />
@@ -31,14 +31,14 @@
                 <span asp-validation-for="Currency" class="text-danger"></span>
             </div>
         </div>
-        <div class="col-lg-9">
+        <div class="col-xl-10 col-xxl-constrain">
             <div class="form-group">
                 <label asp-for="Description" class="form-label"></label>
                 <textarea asp-for="Description" rows="10" cols="40" class="form-control richtext"></textarea>
                 <span asp-validation-for="Description" class="text-danger"></span>
             </div>
         </div>
-        <div class="col-lg-12">
+        <div class="col-xxl-constrain">
             <partial name="TemplateEditor" model="@(nameof(Model.Template), "Products")" />
             <div class="form-group">
                 <label asp-for="Template" class="form-label"></label>
@@ -46,7 +46,7 @@
                 <span asp-validation-for="Template" class="text-danger"></span>
             </div>
         </div>
-        <div class="col-lg-6">
+        <div class="col-xl-8 col-xxl-constrain">
             <h3 class="mt-5 mb-4">Appearance</h3>
             <div class="form-group">
                 <label asp-for="DefaultView" class="form-label" data-required></label>
@@ -113,7 +113,7 @@
                 </div>
             </section>
         </div>
-        <div class="col-lg-9">
+        <div class="col-xl-8 col-xxl-constrain">
             <h3 class="mt-5 mb-2">Additional Options</h3>
             <div class="form-group">
                 <div class="accordion" id="additional">
@@ -130,12 +130,12 @@
                                 @if (Model.Example1 != null)
                                 {
                                     <span>For anything with a custom amount</span>
-                                    <pre><code class="html">@Model.Example1</code></pre>
+                                    <pre class="p-3">@Model.Example1</pre>
                                 }
                                 @if (Model.Example2 != null)
                                 {
                                     <span>For a specific item of your template</span>
-                                    <pre><code class="html">@Model.Example2</code></pre>
+                                    <pre class="p-3">@Model.Example2</pre>
                                 }
                             </div>
                         </div>
@@ -153,7 +153,7 @@
                                 @{
                                     var iframe = $"<iframe src='{(Url.Action("ViewPointOfSale", "UIAppsPublic", new { appId = Model.Id }, Context.Request.Scheme))}' style='max-width: 100%; border: 0;'></iframe>";
                                 }
-                                <pre><code class="html">@iframe</code></pre>
+                                <pre class="p-3">@iframe</pre>
                             </div>
                         </div>
                     </div>
@@ -194,7 +194,7 @@
                                     <span asp-validation-for="NotificationUrl" class="text-danger"></span>
                                 </div>
                                 <p>A <code>POST</code> callback will be sent to notification with the following form will be sent to <code>notificationUrl</code> once the enough is paid and once again once there is enough confirmations to the payment:</p>
-                                <pre><code class="json">@Model.ExampleCallback</code></pre>
+                                <pre class="p-3">@Model.ExampleCallback</pre>
                                 <p><strong>Never</strong> trust anything but <code>id</code>, <strong>ignore</strong> the other fields completely, an attacker can spoof those, they are present only for backward compatibility reason:</p>
                                 <p>
                                     <ul>

BTCPayServer/Views/UIFido2/Create.cshtml

@@ -12,7 +12,7 @@
     <input type="hidden" name="name" id="name" value="@(ViewData.ContainsKey("CredentialName") ? ViewData["CredentialName"] : string.Empty)"/>
 </form>
 <div class="row">
-    <div class="col-lg-8">
+    <div class="col-xl-8">
         <div id="info-message" class="alert alert-info mb-3 d-none">
             <div class="d-flex align-items-center">
                 <span id="spinner" class="fa fa-spinner fa-spin me-3 fido-running" style="font-size:1.5rem"></span>

BTCPayServer/Views/UIHome/Home.cshtml

@@ -3,37 +3,12 @@
     ViewData["Title"] = "BTCPay Server";
 }
 
-@section PageHeadContent
-{
-    <style>
-        .list-group-item .image {
-            display: flex;
-            flex: 0 0 1rem;
-            align-items: center;
-            justify-content: center;
-        }
-        
-        .list-group-item .icon {
-            width: 1.5rem;
-            height: 1.5rem;
-            margin: 1rem;
-        }
-        
-        .list-group-item .content {
-            flex: 1;
-            padding: 1rem 0;
-        }
-    </style>
-}
-
 <partial name="_StatusMessage" />
 
 <h2>Welcome to your BTCPay Server</h2>
 
 @if (!Model.HasStore)
 {
-    <div class="row">
-        <div class="col-lg-9 col-xl-6">
     <p class="lead text-secondary">To start accepting payments, set up a store.</p>
 
     <div class="list-group mt-4" id="SetupGuide">
@@ -45,6 +20,4 @@
             <vc:icon symbol="caret-right"/>
         </a>
     </div>
-        </div>
-    </div>
 }

BTCPayServer/Views/UIInvoice/CreateInvoice.cshtml

@@ -30,7 +30,7 @@
 <h2 class="mt-1 mb-4">@ViewData["Title"]</h2>
 
 <div class="row">
-    <div class="col-lg-6">
+    <div class="col-xl-8 col-xxl-constrain">
         <form asp-action="CreateInvoice" method="post" id="create-invoice-form">
             <div asp-validation-summary="ModelOnly" class="text-danger"></div>
             @if (Model.StoreId != null)

BTCPayServer/Views/UIInvoice/Invoice.cshtml

@@ -43,8 +43,8 @@
 <div class="invoice-details">
     <partial name="_StatusMessage" />
     <div class="row mb-5">
-        <h2 class="col-xs-12 col-lg-6 mb-4 mb-lg-0">@ViewData["Title"]</h2>
+        <h2 class="col col-xl-6 mb-4 mb-xl-0">@ViewData["Title"]</h2>
-        <div class="col-xs-12 col-lg-6 mb-2 mb-lg-0 text-lg-end">
+        <div class="col col-xl-6 mb-2 mb-xl-0 text-xl-end">
             <div class="d-inline-flex">
                 @if (Model.ShowCheckout)
                 {

BTCPayServer/Views/UIManage/APIKeys.cshtml

@@ -3,21 +3,24 @@
 @{
     ViewData.SetActivePage(ManageNavPages.APIKeys, "API Keys");
 }
-<div class="d-flex align-items-center justify-content-between mb-3">
+
+<div class="row">
+    <div class="col-xl-8 col-xxl-constrain">
+        <div class="d-flex align-items-center justify-content-between mb-3">
             <h3 class="mb-0">@ViewData["Title"]</h3>
             <a class="btn btn-primary" asp-action="AddApiKey" id="AddApiKey">
                 <span class="fa fa-plus"></span>
                 Generate Key
             </a>
-</div>
+        </div>
-<p>
+        <p>
             The <a asp-controller="UIHome" asp-action="SwaggerDocs" target="_blank">BTCPay Server Greenfield API</a> offers programmatic access to your instance. You can manage your BTCPay
             Server (e.g. stores, invoices, users) as well as automate workflows and integrations (see <a href="https://docs.btcpayserver.org/Development/GreenFieldExample/" rel="noreferrer noopener">use case examples</a>).
             For that you need the API keys, which can be generated here. Find more information in the <a href="@Url.Action("SwaggerDocs", "UIHome")#section/Authentication" target="_blank" rel="noreferrer noopener">API authentication docs</a>.
-</p>
+        </p>
 
-@if (Model.ApiKeyDatas.Any())
+        @if (Model.ApiKeyDatas.Any())
-{
+        {
             <table class="table table-lg">
                 <thead>
                     <tr>
@@ -75,7 +78,9 @@
                     }
                 </tbody>
             </table>
-}
+        }
+    </div>
+</div>
 
 <partial name="_Confirm" model="@(new ConfirmModel("Delete API key", "Any application using the API key will immediately lose access.", "Delete"))" />
 

BTCPayServer/Views/UIManage/AddApiKey.cshtml

@@ -1,6 +1,5 @@
 @using BTCPayServer.Client
 @using BTCPayServer.Controllers
-@using BTCPayServer.Security.Greenfield
 @model UIManageController.AddApiKeyViewModel
 
 @{
@@ -28,9 +27,11 @@
 
 <h3 class="mb-3">@ViewData["Title"]</h3>
 
-<p>Generate a new api key to use BTCPay through its API.</p>
+<div class="row">
+    <div class="col-xl-8 col-xxl-constrain">
+        <p>Generate a new api key to use BTCPay through its API.</p>
         
-<form method="post" asp-action="AddApiKey">
+        <form method="post" asp-action="AddApiKey">
             <div asp-validation-summary="All" class="text-danger"></div>
         
             <div class="form-group">
@@ -133,4 +134,6 @@
             </div>
         
             <button type="submit" class="btn btn-primary" id="Generate">Generate API Key</button>
-</form>
+        </form>
+    </div>
+</div>

BTCPayServer/Views/UIManage/ChangePassword.cshtml

@@ -4,7 +4,7 @@
 }
 <h3 class="mb-4">@ViewData["Title"]</h3>
 <div class="row">
-    <div class="col-md-6">
+    <div class="col-xl-8 col-xxl-constrain">
         @if (!ViewContext.ModelState.IsValid)
         {
             <div asp-validation-summary="All" class="text-danger"></div>

BTCPayServer/Views/UIManage/EnableAuthenticator.cshtml

@@ -3,7 +3,7 @@
     ViewData.SetActivePage(ManageNavPages.TwoFactorAuthentication, "Enable authenticator app");
 }
 
-<div>
+<div class="col-xl-8 col-xxl-constrain">
     <h3>Enable Authenticator</h3>
     <p class="my-3">To use an authenticator app go through the following steps:</p>
     <ol class="list">
@@ -37,8 +37,6 @@
                 <br/>
                 Enter the code in the confirmation box below.
             </p>    
-            <div class="row">
-                <div class="col-md-6">
             <form method="post">
                 <input asp-for="AuthenticatorUri" type="hidden" />
                 <input asp-for="SharedKey" type="hidden" />
@@ -50,8 +48,6 @@
                 <button type="submit" class="btn btn-primary mt-2">Verify</button>
                 <div asp-validation-summary="ModelOnly" class="text-danger"></div>
             </form>
-                </div>
-            </div>
         </li>
     </ol>
 </div>

BTCPayServer/Views/UIManage/Index.cshtml

@@ -3,7 +3,9 @@
     ViewData.SetActivePage(ManageNavPages.Index, "Update your account");
 }
 <h3 class="mb-4">@ViewData["Title"]</h3>
-<form method="post">
+
+<div class="col-xxl-constrain col-xl-8">
+    <form method="post">
         @if (!ViewContext.ModelState.IsValid)
         {
             <div asp-validation-summary="All" class="text-danger"></div>
@@ -11,13 +13,13 @@
         <div class="form-group row">
             <div class="col-md-6 mb-3">
                 <label asp-for="Username" class="form-label"></label>
-            <input asp-for="Username" class="form-control" disabled/>
+                <input asp-for="Username" class="form-control" disabled />
             </div>
         </div>
         <div class="form-group row">
             <div class="col-md-6 mb-3">
                 <label asp-for="Email" class="form-label"></label>
-            <input asp-for="Email" class="form-control"/>
+                <input asp-for="Email" class="form-control" />
                 <span asp-validation-for="Email" class="text-danger"></span>
             </div>
             <div class="col-md-6 mb-3 d-flex align-items-end">
@@ -39,7 +41,8 @@
         <div id="danger-zone">
             <a id="delete-user" class="btn btn-outline-danger mb-5" data-confirm-input="DELETE" data-bs-toggle="modal" data-bs-target="#ConfirmModal" asp-action="DeleteUserPost" data-description="This action will also delete all stores, invoices, apps and data associated with the user.">Delete Account</a>
         </div>
-</form>
+    </form>
+</div>
 
 <partial name="_Confirm"
          model="@(new ConfirmModel("Delete user", "The user will be permanently deleted. This action will also delete all stores, invoices, apps and data associated with your user.", "Delete", actionName: nameof(BTCPayServer.Controllers.UIManageController.DeleteUserPost)))"/>

BTCPayServer/Views/UIManage/NotificationSettings.cshtml

@@ -6,7 +6,9 @@
 }
 <h3 class="mb-3">@ViewData["Title"]</h3>
 
-<form method="post" asp-action="NotificationSettings">
+<div class="row">
+    <div class="col-xl-8 col-xxl-constrain">
+        <form method="post" asp-action="NotificationSettings">
             @if (Model.All)
             {
                 <div>
@@ -39,4 +41,6 @@
                     <button type="submit" class="btn btn-secondary ms-3" name="command" value="disable-all">Disable all</button>
                 </div>
             }
-</form>
+        </form>
+    </div>
+</div>

BTCPayServer/Views/UIManage/TwoFactorAuthentication.cshtml

@@ -6,7 +6,7 @@
 <h3 class="mb-3">@ViewData["Title"]</h3>
 
 <div class="row">
-    <div class="col-lg-10 col-xl-8">
+    <div class="col-xl-8 col-xxl-constrain">
         <p>
             Two-Factor Authentication (2FA) is an additional measure to protect your account.
             In addition to your password you will be asked for a second proof on login.

BTCPayServer/Views/UIPaymentRequest/EditPaymentRequest.cshtml

@@ -21,7 +21,7 @@
 
 <form method="post" action="@Url.Action("EditPaymentRequest", "UIPaymentRequest", new { storeId = Model.StoreId, payReqId = Model.Id }, Context.Request.Scheme)">
     <div class="row">
-        <div class="col-lg-6">
+        <div class="col-xl-8 col-xxl-constrain">
             <div asp-validation-summary="ModelOnly" class="text-danger"></div>
             <div class="form-group">
                 <label asp-for="Title" class="form-label" data-required></label>
@@ -66,13 +66,14 @@
                 </p>
             </div>
         </div>
-        <div class="col-lg-9">
+        <div class="col-xl-10 col-xxl-constrain">
             <div class="form-group">
                 <label asp-for="Description" class="form-label"></label>
                 <textarea asp-for="Description" class="form-control richtext"></textarea>
                 <span asp-validation-for="Description" class="text-danger"></span>
             </div>
-            
+        </div>
+        <div class="col-xl-8 col-xxl-constrain">
             <h4 class="mt-5 mb-2">Additional Options</h4>
             <div class="form-group">
                 <div class="accordion" id="additional">

BTCPayServer/Views/UIServer/CreateTemporaryFileUrl.cshtml

@@ -7,7 +7,7 @@
 <h3 class="mb-4">@ViewData["Title"]</h3>
 
 <div class="row">
-    <div class="col-lg-6">
+    <div class="col-xl-8 col-xxl-constrain">
         @if (!ViewContext.ModelState.IsValid)
         {
             <div asp-validation-summary="All" class="text-danger"></div>

BTCPayServer/Views/UIServer/CreateUser.cshtml

@@ -6,7 +6,7 @@
 <h3 class="mb-4">@ViewData["Title"]</h3>
 
 <div class="row">
-    <div class="col-md-6">
+    <div class="col-xl-6 col-xxl-constrain">
         <form method="post" asp-action="CreateUser">
             <div asp-validation-summary="ModelOnly" class="text-danger"></div>
 

BTCPayServer/Views/UIServer/EditAmazonS3StorageProvider.cshtml

@@ -6,7 +6,7 @@
 <h3 class="mb-4">@ViewData["Title"]</h3>
 
 <div class="row">
-    <div class="col-lg-6">
+    <div class="col-xl-8 col-xxl-constrain">
         <form method="post">
             <div class="form-group">
                 <label asp-for="ContainerName" class="form-label"></label>

BTCPayServer/Views/UIServer/EditAzureBlobStorageStorageProvider.cshtml

@@ -6,7 +6,7 @@
 <h3 class="mb-4">@ViewData["Title"]</h3>
 
 <div class="row">
-    <div class="col-lg-6">
+    <div class="col-xl-8 col-xxl-constrain">
         <form method="post">
             <div class="form-group">
                 <label asp-for="ContainerName" class="form-label">Container Name</label>

BTCPayServer/Views/UIServer/EditFileSystemStorageProvider.cshtml

@@ -7,7 +7,7 @@
 
 <p>Any uploaded files are being saved on the same machine that hosts BTCPay; please pay attention to your storage space.</p>
 <div class="row">
-    <div class="col-lg-6">
+    <div class="col-xl-8 col-xxl-constrain">
         <a asp-action="Storage" asp-route-forceChoice="true">Change Storage provider</a>
     </div>
 </div>

BTCPayServer/Views/UIServer/EditGoogleCloudStorageStorageProvider.cshtml

@@ -6,7 +6,7 @@
 <h3 class="mb-4">@ViewData["Title"]</h3>
 
 <div class="row">
-    <div class="col-lg-6">
+    <div class="col-xl-8 col-xxl-constrain">
         <form method="post">
             <div class="form-group">
                 <label asp-for="ContainerName" class="form-label">Container Name</label>

BTCPayServer/Views/UIServer/ListPlugins.cshtml

@@ -136,11 +136,10 @@
         @foreach (var plugin in Model.Installed)
         {
             var matchedAvailable = Model.Available.Where(availablePlugin => availablePlugin.Identifier == plugin.Identifier && availablePlugin.Version > plugin.Version).OrderByDescending(availablePlugin => availablePlugin.Version).ToArray();
-           
             var x = matchedAvailable.FirstOrDefault(availablePlugin => DependenciesMet(availablePlugin.Dependencies)) ?? matchedAvailable.FirstOrDefault();
             var updateAvailable = !plugin.SystemPlugin && matchedAvailable.Any();
             var tabId = plugin.Identifier.ToLowerInvariant().Replace(".", "_");
-            <div class="col col-12 col-lg-6 mb-4">
+            <div class="col col-12 col-md-6 col-lg-12 col-xl-6 col-xxl-4 mb-4">
                 <div class="card h-100">
                     <div class="card-body">
                         <h4 class="card-title d-inline-block" title="@plugin.Identifier" data-bs-toggle="tooltip">@plugin.Name</h4>
@@ -257,11 +256,10 @@
     <div class="row mb-4">
         @foreach (var plugin in availableAndNotInstalled)
         {
-            
             var recommended = BTCPayServerOptions.RecommendedPlugins.Contains(plugin.Identifier.ToLowerInvariant());
             var disabled = Model.Disabled?.Contains(plugin.Identifier) ?? false;
             
-            <div class="col col-12 col-lg-6 mb-4">
+            <div class="col col-12 col-md-6 col-lg-12 col-xl-6 col-xxl-4 mb-4">
                 <div class="card h-100">
                     <div class="card-body">
                         <h4 class="card-title d-inline-block" data-bs-toggle="tooltip" title="@plugin.Identifier">@plugin.Name</h4>
@@ -338,7 +336,7 @@
         Upload Plugin
     </button>
     <div class="row collapse" id="manual-upload">
-        <div class="col col-12 col-lg-6 mb-4">
+        <div class="col col-xl-6 mb-4">
             <div class="card">
                 <div class="card-body">
                     <h4 class="card-title">Add plugin manually</h4>

BTCPayServer/Views/UIServer/Maintenance.cshtml

@@ -7,7 +7,7 @@
 
 <form method="post">
     <div class="row mb-5">
-        <div class="col-lg-6">
+    <div class="col-xl-8 col-xxl-constrain">
             <h4 class="mb-2">Domain name</h4>
             <p>You can change the domain name of your server by following <a href="https://docs.btcpayserver.org/Deployment/ChangeDomain/" target="_blank" rel="noreferrer noopener">this guide</a>.</p>
 

BTCPayServer/Views/UIServer/Storage.cshtml

@@ -1,4 +1,3 @@
-@using BTCPayServer.Storage.Models
 @model BTCPayServer.Storage.ViewModels.ChooseStorageViewModel
 @{
     ViewData.SetActivePage(ServerNavPages.Services, "Storage");
@@ -6,15 +5,14 @@
 
 <h3 class="mb-4">@ViewData["Title"]</h3>
 
-@if (Model.ShowChangeWarning)
+<div class="row">
-{
+    <div class="col-xl-8 col-xxl-constrain">
+        @if (Model.ShowChangeWarning)
+        {
             <div class="alert alert-danger mb-4">
                 If you change your configured storage provider, your current files will become inaccessible. 
             </div>
-}
+        }
-
-<div class="row">
-    <div class="col-lg-6">
         <form method="post">
             @if (!ViewContext.ModelState.IsValid)
             {
@@ -22,7 +20,7 @@
             }
             <div class="form-group">
                 <label asp-for="Provider" class="form-label"></label>
-                <select asp-for="Provider" asp-items="@Model.ProvidersList" class="form-select"></select>
+                <select asp-for="Provider" asp-items="@Model.ProvidersList" class="form-select w-auto"></select>
             </div>
             <button type="submit" class="btn btn-primary mt-2" name="command" value="Save">Next</button>
         </form>

BTCPayServer/Views/UIServer/Theme.cshtml

@@ -10,7 +10,7 @@
 <h3 class="mb-4">@ViewData["Title"]</h3>
 
 <div class="row">
-    <div class="col-lg-6">
+    <div class="col-xl-8 col-xxl-constrain">
         <form method="post">
             <h4 class="mb-3">Custom theme</h4>
             <p>Use the default Light or Dark Themes, or provide a CSS theme file below.</p>

BTCPayServer/Views/UIStorePullPayments/NewPullPayment.cshtml

@@ -10,7 +10,7 @@
 <h2 class="mt-1 mb-4">@ViewData["Title"]</h2>
 
 <div class="row">
-    <div class="col-md-6">
+    <div class="col-xl-8 col-xxl-constrain">
         <form method="post"
               asp-route-walletId="@Context.GetRouteValue("walletId")"
               asp-action="NewPullPayment">

BTCPayServer/Views/UIStores/CheckoutAppearance.cshtml

@@ -6,7 +6,7 @@
 }
 
 <div class="row">
-    <div class="col-lg-8">
+    <div class="col-xxl-constrain col-xl-8">
         <form method="post">
             @if (!ViewContext.ModelState.IsValid)
             {

BTCPayServer/Views/UIStores/CreateToken.cshtml

@@ -6,7 +6,7 @@
     ViewBag.ShowStores = ViewBag.ShowStores ?? false;
 }
 <div class="row">
-    <div class="col-lg-6">
+    <div class="col-xxl-constrain col-xl-8">
         <h3 class="mb-4">@ViewData["Title"]</h3>
         <form method="post">
             <div class="form-group">

BTCPayServer/Views/UIStores/Dashboard.cshtml

@@ -4,29 +4,6 @@
     var isReady = Model.WalletEnabled || Model.LightningEnabled;
 }
 
-@section PageHeadContent
-{
-    <style>
-        .list-group-item .image {
-            display: flex;
-            flex: 0 0 1rem;
-            align-items: center;
-            justify-content: center;
-        }
-        
-        .list-group-item .icon {
-            width: 1.5rem;
-            height: 1.5rem;
-            margin: 1rem;
-        }
-        
-        .list-group-item .content {
-            flex: 1;
-            padding: 1rem 0;
-        }
-    </style>
-}
-
 <partial name="_StatusMessage" />
 
 <h2 class="mt-1 mb-3">@ViewData["Title"]</h2>
@@ -40,9 +17,7 @@ else
     <p class="lead text-secondary">To start accepting payments, set up a wallet or a Lightning node.</p>
 }
 
-<div class="row">
+<div class="list-group" id="SetupGuide">
-    <div class="col-md-7 col-xl-5">
-        <div class="list-group" id="SetupGuide">
     <div class="list-group-item d-flex align-items-center" id="SetupGuide-StoreDone">
         <vc:icon symbol="done"/>
         <div class="content">
@@ -113,6 +88,4 @@ else
             </div>
         </div>
     }
-        </div>
-    </div>
 </div>

BTCPayServer/Views/UIStores/GeneralSettings.cshtml

@@ -5,7 +5,7 @@
 }
 
 <div class="row">
-    <div class="col-lg-10 col-xl-8">
+    <div class="col-xxl-constrain col-xl-8">
         @if (!ViewContext.ModelState.IsValid)
         {
             <div asp-validation-summary="All" class="text-danger"></div>
@@ -45,7 +45,7 @@
                 <a href="https://docs.btcpayserver.org/FAQ/Stores/#add-network-fee-to-invoice-vary-with-mining-fees" target="_blank" rel="noreferrer noopener">
                     <span class="fa fa-question-circle-o text-secondary" title="More information..."></span>
                 </a>
-                <select asp-for="NetworkFeeMode" class="form-select">
+                <select asp-for="NetworkFeeMode" class="form-select w-auto">
                     <option value="MultiplePaymentsOnly">... only if the customer makes more than one payment for the invoice</option>
                     <option value="Always">... on every payment</option>
                     <option value="Never">Never add network fee</option>

BTCPayServer/Views/UIStores/Integrations.cshtml

@@ -5,7 +5,7 @@
 }
 
 <div class="row">
-    <div class="col-lg-8">
+    <div class="col-xl-8 col-xxl-constrain">
         <h3 class="mb-0 mb-4">@ViewData["Title"]</h3>
         @if (!ViewContext.ModelState.IsValid)
         {

BTCPayServer/Views/UIStores/ListTokens.cshtml

@@ -16,7 +16,7 @@
 }
 
 <div class="row">
-    <div class="col-lg-8">
+    <div class="col-xxl-constrain col-xl-8">
         <div class="d-flex align-items-center justify-content-between mb-3">
             <h3 class="mb-0">@ViewData["Title"]</h3>
             <a id="CreateNewToken" asp-action="CreateToken" class="btn btn-primary" role="button" asp-route-storeId="@Context.GetRouteValue("storeId")">

BTCPayServer/Views/UIStores/ModifyWebhook.cshtml

@@ -13,7 +13,7 @@
 }
 
 <div class="row">
-    <div class="col-lg-8">
+    <div class="col-xxl-constrain col-xl-8">
         <form method="post">
             <h3 class="mb-3">@ViewData["Title"]</h3>
             <div class="form-group">

BTCPayServer/Views/UIStores/PayButton.cshtml

@@ -130,7 +130,10 @@
 <partial name="_StatusMessage" />
 
 <h2 class="mt-1 mb-4">@ViewData["Title"]</h2>
-<div class="alert alert-warning alert-dismissible mb-4" role="alert">
+<div id="payButtonCtrl">
+    <div class="row">
+        <div class="col-xl-8">
+            <div class="alert alert-warning alert-dismissible mb-4" role="alert">
                 <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                     <vc:icon symbol="close" />
                 </button>
@@ -140,11 +143,7 @@
                 <form asp-action="DisableAnyoneCanCreateInvoice" asp-route-storeId="@Context.GetRouteValue("storeId")" method="post">
                     <button name="command" id="disable-pay-button" type="submit" class="btn btn-danger mt-0" value="Save">Disable payment button</button>
                 </form>
-</div>
+            </div>
-<div id="payButtonCtrl">
-    <div class="row">
-        <div class="col-lg-7">
-            <div class="row">
             <p>Configure your Pay Button, and the generated code will be displayed at the bottom of the page to copy into your project.</p>
             <h4 class="mt-3 mb-3">General Settings</h4>
             <div class="form-group col-md-8">
@@ -160,7 +159,6 @@
                        v-model="srvModel.currency" v-on:change="inputChanges"
                        :class="{'is-invalid': errors.has('currency') }">
             </div>
-            </div>
             <div class="form-group" v-if="!srvModel.appIdEndpoint">
                 <label class="form-label" for="description">Checkout Description</label>
                 <input name="checkoutDesc" type="text" class="form-control" id="description"
@@ -176,7 +174,7 @@
 
     <h4 class="mt-5 mb-3">Display Options</h4>
     <div class="row">
-        <div class="col-lg-7">
+        <div class="col-xl-8 col-xxl-constrain">
             <div class="form-group">
                 <div class="form-check" v-if="!srvModel.appIdEndpoint">
                     <input id="useModal" type="checkbox" v-model="srvModel.useModal" v-on:change="inputChanges" class="form-check-input"/>
@@ -275,7 +273,7 @@
                 </div>
             </template>
         </div>
-        <div class="col-lg-4 mt-4 mt-lg-0">
+        <div class="col-xl-4 mt-4 mt-xl-0">
             <h5 class="mb-3">Preview</h5>
             <div id="preview"></div>
             <div v-show="!srvModel.appIdEndpoint">
@@ -287,7 +285,7 @@
 
     <h4 class="mt-5 mb-3">Payment Notifications</h4>
     <div class="row">
-        <div class="col-lg-7">
+        <div class="col-xl-8 col-xxl-constrain">
             <div class="form-group">
                 <label class="form-label" for="server-ipn">Server IPN</label>
                 <input name="serverIpn" type="text" class="form-control" id="server-ipn"
@@ -324,7 +322,7 @@
 
     <h4 class="mt-5 mb-3">Advanced Options</h4>
     <div class="row" v-if="!srvModel.appIdEndpoint">
-        <div class="col-lg-7">
+        <div class="col-xl-8 col-xxl-constrain">
             <p>
                 Specify additional query string parameters that should be appended to the checkout page once the invoice is created.
                 For example, <code>lang=da-DK</code> would load the checkout page in Danish by default.
@@ -340,7 +338,7 @@
     </div>
 
     <div class="row">
-        <div class="col-lg-7">
+        <div class="col-xl-8 col-xxl-constrain">
             <p>Link this Pay Button to an app instead. Some features are disabled due to the different endpoint capabilities. You can set which perk/item this button should be targeting.</p>
             <div class="form-group">
                 <label class="form-label" for="app-as-endpoint">Use App As Endpoint</label>
@@ -363,7 +361,7 @@
     <h4 class="mt-5 mb-3">Generated Code</h4>
 
     <div class="row" v-show="!errors.any()">
-        <div class="col-lg-12">
+        <div class="col-xxl-8">
             <pre><code id="mainCode" class="html"></code></pre>
             <button class="btn btn-primary" data-clipboard-target="#mainCode">
                 <i class="fa fa-copy"></i> Copy Code
@@ -371,7 +369,7 @@
         </div>
     </div>
     <div class="row" v-show="errors.any()">
-        <div class="col-lg-12 text-danger">
+        <div class="col-xl-8 col-xxl-constrain text-danger">
             Please fix errors shown in order for code generation to successfully execute.
         </div>
     </div>

BTCPayServer/Views/UIStores/Rates.cshtml

@@ -5,7 +5,7 @@
 }
 
 <div class="row">
-    <div class="col-lg-8">
+    <div class="col-xxl-constrain col-xl-8">
         <h3 class="mb-3">@ViewData["Title"]</h3>
         @if (!ViewContext.ModelState.IsValid)
         {

BTCPayServer/Views/UIStores/StoreUsers.cshtml

@@ -5,7 +5,7 @@
 }
 
 <div class="row">
-    <div class="col-lg-8">
+    <div class="col-xxl-constrain col-xl-8">
         <h3 class="mb-3">@ViewData["Title"]</h3>
         <p>
             Give other registered BTCPay Server users access to your store.<br />

BTCPayServer/Views/UIStores/Webhooks.cshtml

@@ -4,7 +4,7 @@
     ViewData.SetActivePage(StoreNavPages.Webhooks, "Webhooks", Context.GetStoreData().Id);
 }
 <div class="row">
-    <div class="col-lg-8">
+    <div class="col-xl-8 col-xxl-constrain">
         <div class="d-flex align-items-center justify-content-between mb-3">
             <h3 class="mb-0">@ViewData["Title"]</h3>
             <a id="CreateWebhook" asp-action="NewWebhook" class="btn btn-primary" role="button" asp-route-storeId="@Context.GetRouteValue("storeId")">

BTCPayServer/Views/UIUserStores/CreateStore.cshtml

@@ -11,7 +11,7 @@
 
 <h2 class="mt-1 mb-4">@ViewData["Title"]</h2>
 <div class="row">
-    <div class="col-lg-6">
+    <div class="col-xl-8 col-xxl-constrain">
         <form asp-action="CreateStore">
             <div asp-validation-summary="ModelOnly" class="text-danger"></div>
             <div class="form-group">

BTCPayServer/wwwroot/main/bootstrap/bootstrap.css

@@ -606,7 +606,8 @@ progress {
 .container-sm,
 .container-md,
 .container-lg,
-.container-xl {
+.container-xl,
+.container-xxl {
   width: 100%;
   padding-right: var(--btcpay-gutter-x, 0.75rem);
   padding-left: var(--btcpay-gutter-x, 0.75rem);
@@ -638,6 +639,12 @@ progress {
   }
 }
 
+@media (min-width: 1400px) {
+  .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
+    max-width: 1320px;
+  }
+}
+
 .row {
   --btcpay-gutter-x: 1.5rem;
   --btcpay-gutter-y: 0;
@@ -1545,6 +1552,176 @@ progress {
   }
 }
 
+@media (min-width: 1400px) {
+  .col-xxl {
+    flex: 1 0 0%;
+  }
+  .row-cols-xxl-auto > * {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .row-cols-xxl-1 > * {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .row-cols-xxl-2 > * {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .row-cols-xxl-3 > * {
+    flex: 0 0 auto;
+    width: 33.33333%;
+  }
+  .row-cols-xxl-4 > * {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .row-cols-xxl-5 > * {
+    flex: 0 0 auto;
+    width: 20%;
+  }
+  .row-cols-xxl-6 > * {
+    flex: 0 0 auto;
+    width: 16.66667%;
+  }
+  .col-xxl-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .col-xxl-1 {
+    flex: 0 0 auto;
+    width: 8.33333%;
+  }
+  .col-xxl-2 {
+    flex: 0 0 auto;
+    width: 16.66667%;
+  }
+  .col-xxl-3 {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .col-xxl-4 {
+    flex: 0 0 auto;
+    width: 33.33333%;
+  }
+  .col-xxl-5 {
+    flex: 0 0 auto;
+    width: 41.66667%;
+  }
+  .col-xxl-6 {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .col-xxl-7 {
+    flex: 0 0 auto;
+    width: 58.33333%;
+  }
+  .col-xxl-8 {
+    flex: 0 0 auto;
+    width: 66.66667%;
+  }
+  .col-xxl-9 {
+    flex: 0 0 auto;
+    width: 75%;
+  }
+  .col-xxl-10 {
+    flex: 0 0 auto;
+    width: 83.33333%;
+  }
+  .col-xxl-11 {
+    flex: 0 0 auto;
+    width: 91.66667%;
+  }
+  .col-xxl-12 {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .offset-xxl-0 {
+    margin-left: 0;
+  }
+  .offset-xxl-1 {
+    margin-left: 8.33333%;
+  }
+  .offset-xxl-2 {
+    margin-left: 16.66667%;
+  }
+  .offset-xxl-3 {
+    margin-left: 25%;
+  }
+  .offset-xxl-4 {
+    margin-left: 33.33333%;
+  }
+  .offset-xxl-5 {
+    margin-left: 41.66667%;
+  }
+  .offset-xxl-6 {
+    margin-left: 50%;
+  }
+  .offset-xxl-7 {
+    margin-left: 58.33333%;
+  }
+  .offset-xxl-8 {
+    margin-left: 66.66667%;
+  }
+  .offset-xxl-9 {
+    margin-left: 75%;
+  }
+  .offset-xxl-10 {
+    margin-left: 83.33333%;
+  }
+  .offset-xxl-11 {
+    margin-left: 91.66667%;
+  }
+  .g-xxl-0,
+  .gx-xxl-0 {
+    --btcpay-gutter-x: 0;
+  }
+  .g-xxl-0,
+  .gy-xxl-0 {
+    --btcpay-gutter-y: 0;
+  }
+  .g-xxl-1,
+  .gx-xxl-1 {
+    --btcpay-gutter-x: 0.25rem;
+  }
+  .g-xxl-1,
+  .gy-xxl-1 {
+    --btcpay-gutter-y: 0.25rem;
+  }
+  .g-xxl-2,
+  .gx-xxl-2 {
+    --btcpay-gutter-x: 0.5rem;
+  }
+  .g-xxl-2,
+  .gy-xxl-2 {
+    --btcpay-gutter-y: 0.5rem;
+  }
+  .g-xxl-3,
+  .gx-xxl-3 {
+    --btcpay-gutter-x: 1rem;
+  }
+  .g-xxl-3,
+  .gy-xxl-3 {
+    --btcpay-gutter-y: 1rem;
+  }
+  .g-xxl-4,
+  .gx-xxl-4 {
+    --btcpay-gutter-x: 1.5rem;
+  }
+  .g-xxl-4,
+  .gy-xxl-4 {
+    --btcpay-gutter-y: 1.5rem;
+  }
+  .g-xxl-5,
+  .gx-xxl-5 {
+    --btcpay-gutter-x: 3rem;
+  }
+  .g-xxl-5,
+  .gy-xxl-5 {
+    --btcpay-gutter-y: 3rem;
+  }
+}
+
 .table {
   --btcpay-table-bg: transparent;
   --btcpay-table-accent-bg: transparent;
@@ -1748,6 +1925,13 @@ progress {
   }
 }
 
+@media (max-width: 1399.98px) {
+  .table-responsive-xxl {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
 .form-label {
   margin-bottom: 0.5rem;
   color: var(--btcpay-form-text-label);
@@ -3408,6 +3592,23 @@ fieldset:disabled .btn {
   }
 }
 
+@media (min-width: 1400px) {
+  .dropdown-menu-xxl-start {
+    --bs-position: start;
+  }
+  .dropdown-menu-xxl-start[data-bs-popper] {
+    right: auto;
+    left: 0;
+  }
+  .dropdown-menu-xxl-end {
+    --bs-position: end;
+  }
+  .dropdown-menu-xxl-end[data-bs-popper] {
+    right: 0;
+    left: auto;
+  }
+}
+
 .dropup .dropdown-menu[data-bs-popper] {
   top: auto;
   bottom: 100%;
@@ -3807,7 +4008,7 @@ fieldset:disabled .btn {
 }
 
 .navbar > .container,
-.navbar > .container-fluid, .navbar > .container-sm, .navbar > .container-md, .navbar > .container-lg, .navbar > .container-xl {
+.navbar > .container-fluid, .navbar > .container-sm, .navbar > .container-md, .navbar > .container-lg, .navbar > .container-xl, .navbar > .container-xxl {
   display: flex;
   flex-wrap: inherit;
   align-items: center;
@@ -4105,6 +4306,60 @@ fieldset:disabled .btn {
   }
 }
 
+@media (min-width: 1400px) {
+  .navbar-expand-xxl {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+  }
+  .navbar-expand-xxl .navbar-nav {
+    flex-direction: row;
+  }
+  .navbar-expand-xxl .navbar-nav .dropdown-menu {
+    position: absolute;
+  }
+  .navbar-expand-xxl .navbar-nav .nav-link {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+  }
+  .navbar-expand-xxl .navbar-nav-scroll {
+    overflow: visible;
+  }
+  .navbar-expand-xxl .navbar-collapse {
+    display: flex !important;
+    flex-basis: auto;
+  }
+  .navbar-expand-xxl .navbar-toggler {
+    display: none;
+  }
+  .navbar-expand-xxl .offcanvas-header {
+    display: none;
+  }
+  .navbar-expand-xxl .offcanvas {
+    position: inherit;
+    bottom: 0;
+    z-index: 1000;
+    flex-grow: 1;
+    visibility: visible !important;
+    background-color: transparent;
+    border-right: 0;
+    border-left: 0;
+    transition: none;
+    transform: none;
+  }
+  .navbar-expand-xxl .offcanvas-top,
+  .navbar-expand-xxl .offcanvas-bottom {
+    height: auto;
+    border-top: 0;
+    border-bottom: 0;
+  }
+  .navbar-expand-xxl .offcanvas-body {
+    display: flex;
+    flex-grow: 0;
+    padding: 0;
+    overflow-y: visible;
+  }
+}
+
 .navbar-expand {
   flex-wrap: nowrap;
   justify-content: flex-start;
@@ -5040,6 +5295,31 @@ fieldset:disabled .btn {
   }
 }
 
+@media (min-width: 1400px) {
+  .list-group-horizontal-xxl {
+    flex-direction: row;
+  }
+  .list-group-horizontal-xxl > .list-group-item:first-child {
+    border-bottom-left-radius: var(--btcpay-border-radius);
+    border-top-right-radius: 0;
+  }
+  .list-group-horizontal-xxl > .list-group-item:last-child {
+    border-top-right-radius: var(--btcpay-border-radius);
+    border-bottom-left-radius: 0;
+  }
+  .list-group-horizontal-xxl > .list-group-item.active {
+    margin-top: 0;
+  }
+  .list-group-horizontal-xxl > .list-group-item + .list-group-item {
+    border-top-width: 1px;
+    border-left-width: 0;
+  }
+  .list-group-horizontal-xxl > .list-group-item + .list-group-item.active {
+    margin-left: -1px;
+    border-left-width: 1px;
+  }
+}
+
 .list-group-flush {
   border-radius: 0;
 }
@@ -5544,6 +5824,29 @@ fieldset:disabled .btn {
   }
 }
 
+@media (max-width: 1399.98px) {
+  .modal-fullscreen-xxl-down {
+    width: 100vw;
+    max-width: none;
+    height: 100%;
+    margin: 0;
+  }
+  .modal-fullscreen-xxl-down .modal-content {
+    height: 100%;
+    border: 0;
+    border-radius: 0;
+  }
+  .modal-fullscreen-xxl-down .modal-header {
+    border-radius: 0;
+  }
+  .modal-fullscreen-xxl-down .modal-body {
+    overflow-y: auto;
+  }
+  .modal-fullscreen-xxl-down .modal-footer {
+    border-radius: 0;
+  }
+}
+
 .tooltip {
   position: absolute;
   z-index: 1080;
@@ -6384,6 +6687,15 @@ fieldset:disabled .btn {
   }
 }
 
+@media (min-width: 1400px) {
+  .sticky-xxl-top {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+}
+
 .hstack {
   display: flex;
   flex-direction: row;
@@ -9759,6 +10071,503 @@ fieldset:disabled .btn {
   }
 }
 
+@media (min-width: 1400px) {
+  .float-xxl-start {
+    float: left !important;
+  }
+  .float-xxl-end {
+    float: right !important;
+  }
+  .float-xxl-none {
+    float: none !important;
+  }
+  .d-xxl-inline {
+    display: inline !important;
+  }
+  .d-xxl-inline-block {
+    display: inline-block !important;
+  }
+  .d-xxl-block {
+    display: block !important;
+  }
+  .d-xxl-grid {
+    display: grid !important;
+  }
+  .d-xxl-table {
+    display: table !important;
+  }
+  .d-xxl-table-row {
+    display: table-row !important;
+  }
+  .d-xxl-table-cell {
+    display: table-cell !important;
+  }
+  .d-xxl-flex {
+    display: flex !important;
+  }
+  .d-xxl-inline-flex {
+    display: inline-flex !important;
+  }
+  .d-xxl-none {
+    display: none !important;
+  }
+  .flex-xxl-fill {
+    flex: 1 1 auto !important;
+  }
+  .flex-xxl-row {
+    flex-direction: row !important;
+  }
+  .flex-xxl-column {
+    flex-direction: column !important;
+  }
+  .flex-xxl-row-reverse {
+    flex-direction: row-reverse !important;
+  }
+  .flex-xxl-column-reverse {
+    flex-direction: column-reverse !important;
+  }
+  .flex-xxl-grow-0 {
+    flex-grow: 0 !important;
+  }
+  .flex-xxl-grow-1 {
+    flex-grow: 1 !important;
+  }
+  .flex-xxl-shrink-0 {
+    flex-shrink: 0 !important;
+  }
+  .flex-xxl-shrink-1 {
+    flex-shrink: 1 !important;
+  }
+  .flex-xxl-wrap {
+    flex-wrap: wrap !important;
+  }
+  .flex-xxl-nowrap {
+    flex-wrap: nowrap !important;
+  }
+  .flex-xxl-wrap-reverse {
+    flex-wrap: wrap-reverse !important;
+  }
+  .gap-xxl-0 {
+    gap: 0 !important;
+  }
+  .gap-xxl-1 {
+    gap: 0.25rem !important;
+  }
+  .gap-xxl-2 {
+    gap: 0.5rem !important;
+  }
+  .gap-xxl-3 {
+    gap: 1rem !important;
+  }
+  .gap-xxl-4 {
+    gap: 1.5rem !important;
+  }
+  .gap-xxl-5 {
+    gap: 3rem !important;
+  }
+  .justify-content-xxl-start {
+    justify-content: flex-start !important;
+  }
+  .justify-content-xxl-end {
+    justify-content: flex-end !important;
+  }
+  .justify-content-xxl-center {
+    justify-content: center !important;
+  }
+  .justify-content-xxl-between {
+    justify-content: space-between !important;
+  }
+  .justify-content-xxl-around {
+    justify-content: space-around !important;
+  }
+  .justify-content-xxl-evenly {
+    justify-content: space-evenly !important;
+  }
+  .align-items-xxl-start {
+    align-items: flex-start !important;
+  }
+  .align-items-xxl-end {
+    align-items: flex-end !important;
+  }
+  .align-items-xxl-center {
+    align-items: center !important;
+  }
+  .align-items-xxl-baseline {
+    align-items: baseline !important;
+  }
+  .align-items-xxl-stretch {
+    align-items: stretch !important;
+  }
+  .align-content-xxl-start {
+    align-content: flex-start !important;
+  }
+  .align-content-xxl-end {
+    align-content: flex-end !important;
+  }
+  .align-content-xxl-center {
+    align-content: center !important;
+  }
+  .align-content-xxl-between {
+    align-content: space-between !important;
+  }
+  .align-content-xxl-around {
+    align-content: space-around !important;
+  }
+  .align-content-xxl-stretch {
+    align-content: stretch !important;
+  }
+  .align-self-xxl-auto {
+    align-self: auto !important;
+  }
+  .align-self-xxl-start {
+    align-self: flex-start !important;
+  }
+  .align-self-xxl-end {
+    align-self: flex-end !important;
+  }
+  .align-self-xxl-center {
+    align-self: center !important;
+  }
+  .align-self-xxl-baseline {
+    align-self: baseline !important;
+  }
+  .align-self-xxl-stretch {
+    align-self: stretch !important;
+  }
+  .order-xxl-first {
+    order: -1 !important;
+  }
+  .order-xxl-0 {
+    order: 0 !important;
+  }
+  .order-xxl-1 {
+    order: 1 !important;
+  }
+  .order-xxl-2 {
+    order: 2 !important;
+  }
+  .order-xxl-3 {
+    order: 3 !important;
+  }
+  .order-xxl-4 {
+    order: 4 !important;
+  }
+  .order-xxl-5 {
+    order: 5 !important;
+  }
+  .order-xxl-last {
+    order: 6 !important;
+  }
+  .m-xxl-0 {
+    margin: 0 !important;
+  }
+  .m-xxl-1 {
+    margin: 0.25rem !important;
+  }
+  .m-xxl-2 {
+    margin: 0.5rem !important;
+  }
+  .m-xxl-3 {
+    margin: 1rem !important;
+  }
+  .m-xxl-4 {
+    margin: 1.5rem !important;
+  }
+  .m-xxl-5 {
+    margin: 3rem !important;
+  }
+  .m-xxl-auto {
+    margin: auto !important;
+  }
+  .mx-xxl-0 {
+    margin-right: 0 !important;
+    margin-left: 0 !important;
+  }
+  .mx-xxl-1 {
+    margin-right: 0.25rem !important;
+    margin-left: 0.25rem !important;
+  }
+  .mx-xxl-2 {
+    margin-right: 0.5rem !important;
+    margin-left: 0.5rem !important;
+  }
+  .mx-xxl-3 {
+    margin-right: 1rem !important;
+    margin-left: 1rem !important;
+  }
+  .mx-xxl-4 {
+    margin-right: 1.5rem !important;
+    margin-left: 1.5rem !important;
+  }
+  .mx-xxl-5 {
+    margin-right: 3rem !important;
+    margin-left: 3rem !important;
+  }
+  .mx-xxl-auto {
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
+  .my-xxl-0 {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+  .my-xxl-1 {
+    margin-top: 0.25rem !important;
+    margin-bottom: 0.25rem !important;
+  }
+  .my-xxl-2 {
+    margin-top: 0.5rem !important;
+    margin-bottom: 0.5rem !important;
+  }
+  .my-xxl-3 {
+    margin-top: 1rem !important;
+    margin-bottom: 1rem !important;
+  }
+  .my-xxl-4 {
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important;
+  }
+  .my-xxl-5 {
+    margin-top: 3rem !important;
+    margin-bottom: 3rem !important;
+  }
+  .my-xxl-auto {
+    margin-top: auto !important;
+    margin-bottom: auto !important;
+  }
+  .mt-xxl-0 {
+    margin-top: 0 !important;
+  }
+  .mt-xxl-1 {
+    margin-top: 0.25rem !important;
+  }
+  .mt-xxl-2 {
+    margin-top: 0.5rem !important;
+  }
+  .mt-xxl-3 {
+    margin-top: 1rem !important;
+  }
+  .mt-xxl-4 {
+    margin-top: 1.5rem !important;
+  }
+  .mt-xxl-5 {
+    margin-top: 3rem !important;
+  }
+  .mt-xxl-auto {
+    margin-top: auto !important;
+  }
+  .me-xxl-0 {
+    margin-right: 0 !important;
+  }
+  .me-xxl-1 {
+    margin-right: 0.25rem !important;
+  }
+  .me-xxl-2 {
+    margin-right: 0.5rem !important;
+  }
+  .me-xxl-3 {
+    margin-right: 1rem !important;
+  }
+  .me-xxl-4 {
+    margin-right: 1.5rem !important;
+  }
+  .me-xxl-5 {
+    margin-right: 3rem !important;
+  }
+  .me-xxl-auto {
+    margin-right: auto !important;
+  }
+  .mb-xxl-0 {
+    margin-bottom: 0 !important;
+  }
+  .mb-xxl-1 {
+    margin-bottom: 0.25rem !important;
+  }
+  .mb-xxl-2 {
+    margin-bottom: 0.5rem !important;
+  }
+  .mb-xxl-3 {
+    margin-bottom: 1rem !important;
+  }
+  .mb-xxl-4 {
+    margin-bottom: 1.5rem !important;
+  }
+  .mb-xxl-5 {
+    margin-bottom: 3rem !important;
+  }
+  .mb-xxl-auto {
+    margin-bottom: auto !important;
+  }
+  .ms-xxl-0 {
+    margin-left: 0 !important;
+  }
+  .ms-xxl-1 {
+    margin-left: 0.25rem !important;
+  }
+  .ms-xxl-2 {
+    margin-left: 0.5rem !important;
+  }
+  .ms-xxl-3 {
+    margin-left: 1rem !important;
+  }
+  .ms-xxl-4 {
+    margin-left: 1.5rem !important;
+  }
+  .ms-xxl-5 {
+    margin-left: 3rem !important;
+  }
+  .ms-xxl-auto {
+    margin-left: auto !important;
+  }
+  .p-xxl-0 {
+    padding: 0 !important;
+  }
+  .p-xxl-1 {
+    padding: 0.25rem !important;
+  }
+  .p-xxl-2 {
+    padding: 0.5rem !important;
+  }
+  .p-xxl-3 {
+    padding: 1rem !important;
+  }
+  .p-xxl-4 {
+    padding: 1.5rem !important;
+  }
+  .p-xxl-5 {
+    padding: 3rem !important;
+  }
+  .px-xxl-0 {
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+  }
+  .px-xxl-1 {
+    padding-right: 0.25rem !important;
+    padding-left: 0.25rem !important;
+  }
+  .px-xxl-2 {
+    padding-right: 0.5rem !important;
+    padding-left: 0.5rem !important;
+  }
+  .px-xxl-3 {
+    padding-right: 1rem !important;
+    padding-left: 1rem !important;
+  }
+  .px-xxl-4 {
+    padding-right: 1.5rem !important;
+    padding-left: 1.5rem !important;
+  }
+  .px-xxl-5 {
+    padding-right: 3rem !important;
+    padding-left: 3rem !important;
+  }
+  .py-xxl-0 {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+  }
+  .py-xxl-1 {
+    padding-top: 0.25rem !important;
+    padding-bottom: 0.25rem !important;
+  }
+  .py-xxl-2 {
+    padding-top: 0.5rem !important;
+    padding-bottom: 0.5rem !important;
+  }
+  .py-xxl-3 {
+    padding-top: 1rem !important;
+    padding-bottom: 1rem !important;
+  }
+  .py-xxl-4 {
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important;
+  }
+  .py-xxl-5 {
+    padding-top: 3rem !important;
+    padding-bottom: 3rem !important;
+  }
+  .pt-xxl-0 {
+    padding-top: 0 !important;
+  }
+  .pt-xxl-1 {
+    padding-top: 0.25rem !important;
+  }
+  .pt-xxl-2 {
+    padding-top: 0.5rem !important;
+  }
+  .pt-xxl-3 {
+    padding-top: 1rem !important;
+  }
+  .pt-xxl-4 {
+    padding-top: 1.5rem !important;
+  }
+  .pt-xxl-5 {
+    padding-top: 3rem !important;
+  }
+  .pe-xxl-0 {
+    padding-right: 0 !important;
+  }
+  .pe-xxl-1 {
+    padding-right: 0.25rem !important;
+  }
+  .pe-xxl-2 {
+    padding-right: 0.5rem !important;
+  }
+  .pe-xxl-3 {
+    padding-right: 1rem !important;
+  }
+  .pe-xxl-4 {
+    padding-right: 1.5rem !important;
+  }
+  .pe-xxl-5 {
+    padding-right: 3rem !important;
+  }
+  .pb-xxl-0 {
+    padding-bottom: 0 !important;
+  }
+  .pb-xxl-1 {
+    padding-bottom: 0.25rem !important;
+  }
+  .pb-xxl-2 {
+    padding-bottom: 0.5rem !important;
+  }
+  .pb-xxl-3 {
+    padding-bottom: 1rem !important;
+  }
+  .pb-xxl-4 {
+    padding-bottom: 1.5rem !important;
+  }
+  .pb-xxl-5 {
+    padding-bottom: 3rem !important;
+  }
+  .ps-xxl-0 {
+    padding-left: 0 !important;
+  }
+  .ps-xxl-1 {
+    padding-left: 0.25rem !important;
+  }
+  .ps-xxl-2 {
+    padding-left: 0.5rem !important;
+  }
+  .ps-xxl-3 {
+    padding-left: 1rem !important;
+  }
+  .ps-xxl-4 {
+    padding-left: 1.5rem !important;
+  }
+  .ps-xxl-5 {
+    padding-left: 3rem !important;
+  }
+  .text-xxl-start {
+    text-align: left !important;
+  }
+  .text-xxl-end {
+    text-align: right !important;
+  }
+  .text-xxl-center {
+    text-align: center !important;
+  }
+}
+
 @media (min-width: 1200px) {
   .fs-1 {
     font-size: 2.1875rem !important;
@@ -10386,5 +11195,6 @@ html[data-devenv]:before {
 @media (min-width: 576px) and (max-width: 767px) { html[data-devenv]:before { content: 'SM'; } }
 @media (min-width: 768px) and (max-width: 991px) { html[data-devenv]:before { content: 'MD'; } }
 @media (min-width: 992px) and (max-width: 1199px) { html[data-devenv]:before { content: 'LG'; } }
-@media (min-width: 1200px) { html[data-devenv]:before { content: 'XL'; } }
+@media (min-width: 1200px) and (max-width: 1399px) { html[data-devenv]:before { content: 'XL'; } }
+@media (min-width: 1400px) { html[data-devenv]:before { content: 'XXL'; } }
 @media print { html[data-devenv]:before { content: none; } }

BTCPayServer/wwwroot/main/site.css

@@ -59,6 +59,12 @@ hr.primary {
     }
 }
 
+@media (min-width: 1400px) {
+    .col-xxl-constrain {
+        max-width: 800px;
+    }
+}
+
 /* Info icons in main headline */
 h2 small .fa-question-circle-o {
     position: relative;
@@ -200,3 +206,19 @@ svg.icon-note {
 .services-list .service h6 {
     margin: var(--btcpay-space-m) 0 0 0;
 }
+
+/* Setup Guide */
+#SetupGuide {
+    max-width: 30em;
+}
+
+#SetupGuide .list-group-item .icon {
+    width: 1.5rem;
+    height: 1.5rem;
+    margin: 1rem;
+}
+
+#SetupGuide .list-group-item .content {
+    flex: 1;
+    padding: 1rem 0;
+}