From 71b7375773e745a5dc0db647b4fbe090c7a94442 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sun, 25 Jun 2023 14:00:55 -0400
Subject: [PATCH 01/17] fix(UI): Make max-width wider, and make sidebar
 narrower on wide screens #1536

---
 src/assets/css/main.css                       |   3 +-
 src/assets/css/themes/_variables.scss         |   4 -
 src/assets/css/themes/darkly-compact.css      | 350 +++++-------------
 src/assets/css/themes/darkly-red.css          |  32 +-
 src/assets/css/themes/darkly.css              |  32 +-
 src/assets/css/themes/litely-compact.css      | 350 +++++-------------
 src/assets/css/themes/litely-red.css          |  32 +-
 src/assets/css/themes/litely.css              |  32 +-
 src/shared/components/community/community.tsx |   4 +-
 src/shared/components/home/home.tsx           |   4 +-
 src/shared/components/post/post-listing.tsx   |   4 +-
 src/shared/components/post/post.tsx           |   6 +-
 12 files changed, 309 insertions(+), 544 deletions(-)

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index cb4a8b81..ba234c03 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -198,8 +198,7 @@ blockquote {
 
 .thumbnail {
   object-fit: cover;
-  min-height: 60px;
-  max-height: 80px;
+  aspect-ratio: 4/3;
   width: 100%;
 }
 
diff --git a/src/assets/css/themes/_variables.scss b/src/assets/css/themes/_variables.scss
index e7d7dae8..1418597a 100644
--- a/src/assets/css/themes/_variables.scss
+++ b/src/assets/css/themes/_variables.scss
@@ -1,6 +1,2 @@
 $link-decoration: none;
 $min-contrast-ratio: 3;
-
-$container-max-widths: (
-  lg: 1140px,
-);
diff --git a/src/assets/css/themes/darkly-compact.css b/src/assets/css/themes/darkly-compact.css
index 38274dce..6bc0f210 100644
--- a/src/assets/css/themes/darkly-compact.css
+++ b/src/assets/css/themes/darkly-compact.css
@@ -309,11 +309,9 @@ p {
 }
 
 abbr[title] {
-  -webkit-text-decoration: underline dotted;
-          text-decoration: underline dotted;
+  text-decoration: underline dotted;
   cursor: help;
-  -webkit-text-decoration-skip-ink: none;
-          text-decoration-skip-ink: none;
+  text-decoration-skip-ink: none;
 }
 
 address {
@@ -2131,9 +2129,7 @@ progress {
   background-color: #444;
   background-clip: padding-box;
   border: var(--bs-border-width) solid #222;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
+  appearance: none;
   border-radius: var(--bs-border-radius);
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
@@ -2164,10 +2160,6 @@ progress {
   display: block;
   padding: 0;
 }
-.form-control::-moz-placeholder {
-  color: var(--bs-secondary-color);
-  opacity: 1;
-}
 .form-control::placeholder {
   color: var(--bs-secondary-color);
   opacity: 1;
@@ -2179,8 +2171,7 @@ progress {
 .form-control::file-selector-button {
   padding: 0.375rem 0.75rem;
   margin: -0.375rem -0.75rem;
-  -webkit-margin-end: 0.75rem;
-          margin-inline-end: 0.75rem;
+  margin-inline-end: 0.75rem;
   color: #fff;
   background-color: var(--bs-tertiary-bg);
   pointer-events: none;
@@ -2228,8 +2219,7 @@ progress {
 .form-control-sm::file-selector-button {
   padding: 0.25rem 0.5rem;
   margin: -0.25rem -0.5rem;
-  -webkit-margin-end: 0.5rem;
-          margin-inline-end: 0.5rem;
+  margin-inline-end: 0.5rem;
 }
 
 .form-control-lg {
@@ -2241,8 +2231,7 @@ progress {
 .form-control-lg::file-selector-button {
   padding: 0.5rem 1rem;
   margin: -0.5rem -1rem;
-  -webkit-margin-end: 1rem;
-          margin-inline-end: 1rem;
+  margin-inline-end: 1rem;
 }
 
 textarea.form-control {
@@ -2295,9 +2284,7 @@ textarea.form-control-lg {
   border: var(--bs-border-width) solid #222;
   border-radius: var(--bs-border-radius);
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
+  appearance: none;
 }
 @media (prefers-reduced-motion: reduce) {
   .form-select {
@@ -2375,11 +2362,8 @@ textarea.form-control-lg {
   background-position: center;
   background-size: contain;
   border: var(--bs-border-width) solid var(--bs-border-color);
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  -webkit-print-color-adjust: exact;
-          print-color-adjust: exact;
+  appearance: none;
+  print-color-adjust: exact;
 }
 .form-check-input[type=checkbox] {
   border-radius: 0.25em;
@@ -2478,9 +2462,7 @@ textarea.form-control-lg {
   height: 1.5rem;
   padding: 0;
   background-color: transparent;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
+  appearance: none;
 }
 .form-range:focus {
   outline: 0;
@@ -2501,14 +2483,11 @@ textarea.form-control-lg {
   background-color: #00bc8c;
   border: 0;
   border-radius: 1rem;
-  -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  -webkit-appearance: none;
-          appearance: none;
+  appearance: none;
 }
 @media (prefers-reduced-motion: reduce) {
   .form-range::-webkit-slider-thumb {
-    -webkit-transition: none;
     transition: none;
   }
 }
@@ -2530,14 +2509,11 @@ textarea.form-control-lg {
   background-color: #00bc8c;
   border: 0;
   border-radius: 1rem;
-  -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  -moz-appearance: none;
-       appearance: none;
+  appearance: none;
 }
 @media (prefers-reduced-motion: reduce) {
   .form-range::-moz-range-thumb {
-    -moz-transition: none;
     transition: none;
   }
 }
@@ -2598,17 +2574,10 @@ textarea.form-control-lg {
 .form-floating > .form-control-plaintext {
   padding: 1rem 0.75rem;
 }
-.form-floating > .form-control::-moz-placeholder, .form-floating > .form-control-plaintext::-moz-placeholder {
-  color: transparent;
-}
 .form-floating > .form-control::placeholder,
 .form-floating > .form-control-plaintext::placeholder {
   color: transparent;
 }
-.form-floating > .form-control:not(:-moz-placeholder-shown), .form-floating > .form-control-plaintext:not(:-moz-placeholder-shown) {
-  padding-top: 1.625rem;
-  padding-bottom: 0.625rem;
-}
 .form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown),
 .form-floating > .form-control-plaintext:focus,
 .form-floating > .form-control-plaintext:not(:placeholder-shown) {
@@ -2624,10 +2593,6 @@ textarea.form-control-lg {
   padding-top: 1.625rem;
   padding-bottom: 0.625rem;
 }
-.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
-  color: rgba(var(--bs-body-color-rgb), 0.65);
-  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
-}
 .form-floating > .form-control:focus ~ label,
 .form-floating > .form-control:not(:placeholder-shown) ~ label,
 .form-floating > .form-control-plaintext ~ label,
@@ -2635,15 +2600,6 @@ textarea.form-control-lg {
   color: rgba(var(--bs-body-color-rgb), 0.65);
   transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
 }
-.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label::after {
-  position: absolute;
-  inset: 1rem 0.375rem;
-  z-index: -1;
-  height: 1.5em;
-  content: "";
-  background-color: #444;
-  border-radius: var(--bs-border-radius);
-}
 .form-floating > .form-control:focus ~ label::after,
 .form-floating > .form-control:not(:placeholder-shown) ~ label::after,
 .form-floating > .form-control-plaintext ~ label::after,
@@ -2967,9 +2923,7 @@ textarea.form-control-lg {
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
+  user-select: none;
   border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
   border-radius: var(--bs-btn-border-radius);
   background-color: var(--bs-btn-bg);
@@ -5354,9 +5308,7 @@ textarea.form-control-lg {
 }
 .btn-close:disabled, .btn-close.disabled {
   pointer-events: none;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
+  user-select: none;
   opacity: var(--bs-btn-close-disabled-opacity);
 }
 
@@ -5406,7 +5358,6 @@ textarea.form-control-lg {
   --bs-toast-zindex: 1090;
   position: absolute;
   z-index: var(--bs-toast-zindex);
-  width: -moz-max-content;
   width: max-content;
   max-width: 100%;
   pointer-events: none;
@@ -6307,8 +6258,6 @@ textarea.form-control-lg {
     border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateX(-100%);
   }
-}
-@media (max-width: 575.98px) {
   .offcanvas-sm.offcanvas-end {
     top: 0;
     right: 0;
@@ -6316,8 +6265,6 @@ textarea.form-control-lg {
     border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateX(100%);
   }
-}
-@media (max-width: 575.98px) {
   .offcanvas-sm.offcanvas-top {
     top: 0;
     right: 0;
@@ -6327,8 +6274,6 @@ textarea.form-control-lg {
     border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateY(-100%);
   }
-}
-@media (max-width: 575.98px) {
   .offcanvas-sm.offcanvas-bottom {
     right: 0;
     left: 0;
@@ -6337,13 +6282,9 @@ textarea.form-control-lg {
     border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateY(100%);
   }
-}
-@media (max-width: 575.98px) {
   .offcanvas-sm.showing, .offcanvas-sm.show:not(.hiding) {
     transform: none;
   }
-}
-@media (max-width: 575.98px) {
   .offcanvas-sm.showing, .offcanvas-sm.hiding, .offcanvas-sm.show {
     visibility: visible;
   }
@@ -6395,8 +6336,6 @@ textarea.form-control-lg {
     border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateX(-100%);
   }
-}
-@media (max-width: 767.98px) {
   .offcanvas-md.offcanvas-end {
     top: 0;
     right: 0;
@@ -6404,8 +6343,6 @@ textarea.form-control-lg {
     border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateX(100%);
   }
-}
-@media (max-width: 767.98px) {
   .offcanvas-md.offcanvas-top {
     top: 0;
     right: 0;
@@ -6415,8 +6352,6 @@ textarea.form-control-lg {
     border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateY(-100%);
   }
-}
-@media (max-width: 767.98px) {
   .offcanvas-md.offcanvas-bottom {
     right: 0;
     left: 0;
@@ -6425,13 +6360,9 @@ textarea.form-control-lg {
     border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateY(100%);
   }
-}
-@media (max-width: 767.98px) {
   .offcanvas-md.showing, .offcanvas-md.show:not(.hiding) {
     transform: none;
   }
-}
-@media (max-width: 767.98px) {
   .offcanvas-md.showing, .offcanvas-md.hiding, .offcanvas-md.show {
     visibility: visible;
   }
@@ -6483,8 +6414,6 @@ textarea.form-control-lg {
     border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateX(-100%);
   }
-}
-@media (max-width: 991.98px) {
   .offcanvas-lg.offcanvas-end {
     top: 0;
     right: 0;
@@ -6492,8 +6421,6 @@ textarea.form-control-lg {
     border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateX(100%);
   }
-}
-@media (max-width: 991.98px) {
   .offcanvas-lg.offcanvas-top {
     top: 0;
     right: 0;
@@ -6503,8 +6430,6 @@ textarea.form-control-lg {
     border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateY(-100%);
   }
-}
-@media (max-width: 991.98px) {
   .offcanvas-lg.offcanvas-bottom {
     right: 0;
     left: 0;
@@ -6513,13 +6438,9 @@ textarea.form-control-lg {
     border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateY(100%);
   }
-}
-@media (max-width: 991.98px) {
   .offcanvas-lg.showing, .offcanvas-lg.show:not(.hiding) {
     transform: none;
   }
-}
-@media (max-width: 991.98px) {
   .offcanvas-lg.showing, .offcanvas-lg.hiding, .offcanvas-lg.show {
     visibility: visible;
   }
@@ -6571,8 +6492,6 @@ textarea.form-control-lg {
     border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateX(-100%);
   }
-}
-@media (max-width: 1199.98px) {
   .offcanvas-xl.offcanvas-end {
     top: 0;
     right: 0;
@@ -6580,8 +6499,6 @@ textarea.form-control-lg {
     border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateX(100%);
   }
-}
-@media (max-width: 1199.98px) {
   .offcanvas-xl.offcanvas-top {
     top: 0;
     right: 0;
@@ -6591,8 +6508,6 @@ textarea.form-control-lg {
     border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateY(-100%);
   }
-}
-@media (max-width: 1199.98px) {
   .offcanvas-xl.offcanvas-bottom {
     right: 0;
     left: 0;
@@ -6601,13 +6516,9 @@ textarea.form-control-lg {
     border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateY(100%);
   }
-}
-@media (max-width: 1199.98px) {
   .offcanvas-xl.showing, .offcanvas-xl.show:not(.hiding) {
     transform: none;
   }
-}
-@media (max-width: 1199.98px) {
   .offcanvas-xl.showing, .offcanvas-xl.hiding, .offcanvas-xl.show {
     visibility: visible;
   }
@@ -6659,8 +6570,6 @@ textarea.form-control-lg {
     border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateX(-100%);
   }
-}
-@media (max-width: 1399.98px) {
   .offcanvas-xxl.offcanvas-end {
     top: 0;
     right: 0;
@@ -6668,8 +6577,6 @@ textarea.form-control-lg {
     border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateX(100%);
   }
-}
-@media (max-width: 1399.98px) {
   .offcanvas-xxl.offcanvas-top {
     top: 0;
     right: 0;
@@ -6679,8 +6586,6 @@ textarea.form-control-lg {
     border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateY(-100%);
   }
-}
-@media (max-width: 1399.98px) {
   .offcanvas-xxl.offcanvas-bottom {
     right: 0;
     left: 0;
@@ -6689,13 +6594,9 @@ textarea.form-control-lg {
     border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateY(100%);
   }
-}
-@media (max-width: 1399.98px) {
   .offcanvas-xxl.showing, .offcanvas-xxl.show:not(.hiding) {
     transform: none;
   }
-}
-@media (max-width: 1399.98px) {
   .offcanvas-xxl.showing, .offcanvas-xxl.hiding, .offcanvas-xxl.show {
     visibility: visible;
   }
@@ -6850,17 +6751,14 @@ textarea.form-control-lg {
   }
 }
 .placeholder-wave {
-  -webkit-mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
-          mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
-  -webkit-mask-size: 200% 100%;
-          mask-size: 200% 100%;
+  mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
+  mask-size: 200% 100%;
   animation: placeholder-wave 2s linear infinite;
 }
 
 @keyframes placeholder-wave {
   100% {
-    -webkit-mask-position: -200% 0%;
-            mask-position: -200% 0%;
+    mask-position: -200% 0%;
   }
 }
 .clearfix::after {
@@ -7233,28 +7131,23 @@ textarea.form-control-lg {
 }
 
 .object-fit-contain {
-  -o-object-fit: contain !important;
-     object-fit: contain !important;
+  object-fit: contain !important;
 }
 
 .object-fit-cover {
-  -o-object-fit: cover !important;
-     object-fit: cover !important;
+  object-fit: cover !important;
 }
 
 .object-fit-fill {
-  -o-object-fit: fill !important;
-     object-fit: fill !important;
+  object-fit: fill !important;
 }
 
 .object-fit-scale {
-  -o-object-fit: scale-down !important;
-     object-fit: scale-down !important;
+  object-fit: scale-down !important;
 }
 
 .object-fit-none {
-  -o-object-fit: none !important;
-     object-fit: none !important;
+  object-fit: none !important;
 }
 
 .opacity-0 {
@@ -8334,33 +8227,27 @@ textarea.form-control-lg {
 }
 
 .column-gap-0 {
-  -moz-column-gap: 0 !important;
-       column-gap: 0 !important;
+  column-gap: 0 !important;
 }
 
 .column-gap-1 {
-  -moz-column-gap: 0.25rem !important;
-       column-gap: 0.25rem !important;
+  column-gap: 0.25rem !important;
 }
 
 .column-gap-2 {
-  -moz-column-gap: 0.5rem !important;
-       column-gap: 0.5rem !important;
+  column-gap: 0.5rem !important;
 }
 
 .column-gap-3 {
-  -moz-column-gap: 1rem !important;
-       column-gap: 1rem !important;
+  column-gap: 1rem !important;
 }
 
 .column-gap-4 {
-  -moz-column-gap: 1.5rem !important;
-       column-gap: 1.5rem !important;
+  column-gap: 1.5rem !important;
 }
 
 .column-gap-5 {
-  -moz-column-gap: 3rem !important;
-       column-gap: 3rem !important;
+  column-gap: 3rem !important;
 }
 
 .font-monospace {
@@ -8916,21 +8803,15 @@ textarea.form-control-lg {
 }
 
 .user-select-all {
-  -webkit-user-select: all !important;
-     -moz-user-select: all !important;
-          user-select: all !important;
+  user-select: all !important;
 }
 
 .user-select-auto {
-  -webkit-user-select: auto !important;
-     -moz-user-select: auto !important;
-          user-select: auto !important;
+  user-select: auto !important;
 }
 
 .user-select-none {
-  -webkit-user-select: none !important;
-     -moz-user-select: none !important;
-          user-select: none !important;
+  user-select: none !important;
 }
 
 .pe-none {
@@ -9196,24 +9077,19 @@ textarea.form-control-lg {
     float: none !important;
   }
   .object-fit-sm-contain {
-    -o-object-fit: contain !important;
-       object-fit: contain !important;
+    object-fit: contain !important;
   }
   .object-fit-sm-cover {
-    -o-object-fit: cover !important;
-       object-fit: cover !important;
+    object-fit: cover !important;
   }
   .object-fit-sm-fill {
-    -o-object-fit: fill !important;
-       object-fit: fill !important;
+    object-fit: fill !important;
   }
   .object-fit-sm-scale {
-    -o-object-fit: scale-down !important;
-       object-fit: scale-down !important;
+    object-fit: scale-down !important;
   }
   .object-fit-sm-none {
-    -o-object-fit: none !important;
-       object-fit: none !important;
+    object-fit: none !important;
   }
   .d-sm-inline {
     display: inline !important;
@@ -9713,28 +9589,22 @@ textarea.form-control-lg {
     row-gap: 3rem !important;
   }
   .column-gap-sm-0 {
-    -moz-column-gap: 0 !important;
-         column-gap: 0 !important;
+    column-gap: 0 !important;
   }
   .column-gap-sm-1 {
-    -moz-column-gap: 0.25rem !important;
-         column-gap: 0.25rem !important;
+    column-gap: 0.25rem !important;
   }
   .column-gap-sm-2 {
-    -moz-column-gap: 0.5rem !important;
-         column-gap: 0.5rem !important;
+    column-gap: 0.5rem !important;
   }
   .column-gap-sm-3 {
-    -moz-column-gap: 1rem !important;
-         column-gap: 1rem !important;
+    column-gap: 1rem !important;
   }
   .column-gap-sm-4 {
-    -moz-column-gap: 1.5rem !important;
-         column-gap: 1.5rem !important;
+    column-gap: 1.5rem !important;
   }
   .column-gap-sm-5 {
-    -moz-column-gap: 3rem !important;
-         column-gap: 3rem !important;
+    column-gap: 3rem !important;
   }
   .text-sm-start {
     text-align: left !important;
@@ -9757,24 +9627,19 @@ textarea.form-control-lg {
     float: none !important;
   }
   .object-fit-md-contain {
-    -o-object-fit: contain !important;
-       object-fit: contain !important;
+    object-fit: contain !important;
   }
   .object-fit-md-cover {
-    -o-object-fit: cover !important;
-       object-fit: cover !important;
+    object-fit: cover !important;
   }
   .object-fit-md-fill {
-    -o-object-fit: fill !important;
-       object-fit: fill !important;
+    object-fit: fill !important;
   }
   .object-fit-md-scale {
-    -o-object-fit: scale-down !important;
-       object-fit: scale-down !important;
+    object-fit: scale-down !important;
   }
   .object-fit-md-none {
-    -o-object-fit: none !important;
-       object-fit: none !important;
+    object-fit: none !important;
   }
   .d-md-inline {
     display: inline !important;
@@ -10274,28 +10139,22 @@ textarea.form-control-lg {
     row-gap: 3rem !important;
   }
   .column-gap-md-0 {
-    -moz-column-gap: 0 !important;
-         column-gap: 0 !important;
+    column-gap: 0 !important;
   }
   .column-gap-md-1 {
-    -moz-column-gap: 0.25rem !important;
-         column-gap: 0.25rem !important;
+    column-gap: 0.25rem !important;
   }
   .column-gap-md-2 {
-    -moz-column-gap: 0.5rem !important;
-         column-gap: 0.5rem !important;
+    column-gap: 0.5rem !important;
   }
   .column-gap-md-3 {
-    -moz-column-gap: 1rem !important;
-         column-gap: 1rem !important;
+    column-gap: 1rem !important;
   }
   .column-gap-md-4 {
-    -moz-column-gap: 1.5rem !important;
-         column-gap: 1.5rem !important;
+    column-gap: 1.5rem !important;
   }
   .column-gap-md-5 {
-    -moz-column-gap: 3rem !important;
-         column-gap: 3rem !important;
+    column-gap: 3rem !important;
   }
   .text-md-start {
     text-align: left !important;
@@ -10318,24 +10177,19 @@ textarea.form-control-lg {
     float: none !important;
   }
   .object-fit-lg-contain {
-    -o-object-fit: contain !important;
-       object-fit: contain !important;
+    object-fit: contain !important;
   }
   .object-fit-lg-cover {
-    -o-object-fit: cover !important;
-       object-fit: cover !important;
+    object-fit: cover !important;
   }
   .object-fit-lg-fill {
-    -o-object-fit: fill !important;
-       object-fit: fill !important;
+    object-fit: fill !important;
   }
   .object-fit-lg-scale {
-    -o-object-fit: scale-down !important;
-       object-fit: scale-down !important;
+    object-fit: scale-down !important;
   }
   .object-fit-lg-none {
-    -o-object-fit: none !important;
-       object-fit: none !important;
+    object-fit: none !important;
   }
   .d-lg-inline {
     display: inline !important;
@@ -10835,28 +10689,22 @@ textarea.form-control-lg {
     row-gap: 3rem !important;
   }
   .column-gap-lg-0 {
-    -moz-column-gap: 0 !important;
-         column-gap: 0 !important;
+    column-gap: 0 !important;
   }
   .column-gap-lg-1 {
-    -moz-column-gap: 0.25rem !important;
-         column-gap: 0.25rem !important;
+    column-gap: 0.25rem !important;
   }
   .column-gap-lg-2 {
-    -moz-column-gap: 0.5rem !important;
-         column-gap: 0.5rem !important;
+    column-gap: 0.5rem !important;
   }
   .column-gap-lg-3 {
-    -moz-column-gap: 1rem !important;
-         column-gap: 1rem !important;
+    column-gap: 1rem !important;
   }
   .column-gap-lg-4 {
-    -moz-column-gap: 1.5rem !important;
-         column-gap: 1.5rem !important;
+    column-gap: 1.5rem !important;
   }
   .column-gap-lg-5 {
-    -moz-column-gap: 3rem !important;
-         column-gap: 3rem !important;
+    column-gap: 3rem !important;
   }
   .text-lg-start {
     text-align: left !important;
@@ -10879,24 +10727,19 @@ textarea.form-control-lg {
     float: none !important;
   }
   .object-fit-xl-contain {
-    -o-object-fit: contain !important;
-       object-fit: contain !important;
+    object-fit: contain !important;
   }
   .object-fit-xl-cover {
-    -o-object-fit: cover !important;
-       object-fit: cover !important;
+    object-fit: cover !important;
   }
   .object-fit-xl-fill {
-    -o-object-fit: fill !important;
-       object-fit: fill !important;
+    object-fit: fill !important;
   }
   .object-fit-xl-scale {
-    -o-object-fit: scale-down !important;
-       object-fit: scale-down !important;
+    object-fit: scale-down !important;
   }
   .object-fit-xl-none {
-    -o-object-fit: none !important;
-       object-fit: none !important;
+    object-fit: none !important;
   }
   .d-xl-inline {
     display: inline !important;
@@ -11396,28 +11239,22 @@ textarea.form-control-lg {
     row-gap: 3rem !important;
   }
   .column-gap-xl-0 {
-    -moz-column-gap: 0 !important;
-         column-gap: 0 !important;
+    column-gap: 0 !important;
   }
   .column-gap-xl-1 {
-    -moz-column-gap: 0.25rem !important;
-         column-gap: 0.25rem !important;
+    column-gap: 0.25rem !important;
   }
   .column-gap-xl-2 {
-    -moz-column-gap: 0.5rem !important;
-         column-gap: 0.5rem !important;
+    column-gap: 0.5rem !important;
   }
   .column-gap-xl-3 {
-    -moz-column-gap: 1rem !important;
-         column-gap: 1rem !important;
+    column-gap: 1rem !important;
   }
   .column-gap-xl-4 {
-    -moz-column-gap: 1.5rem !important;
-         column-gap: 1.5rem !important;
+    column-gap: 1.5rem !important;
   }
   .column-gap-xl-5 {
-    -moz-column-gap: 3rem !important;
-         column-gap: 3rem !important;
+    column-gap: 3rem !important;
   }
   .text-xl-start {
     text-align: left !important;
@@ -11440,24 +11277,19 @@ textarea.form-control-lg {
     float: none !important;
   }
   .object-fit-xxl-contain {
-    -o-object-fit: contain !important;
-       object-fit: contain !important;
+    object-fit: contain !important;
   }
   .object-fit-xxl-cover {
-    -o-object-fit: cover !important;
-       object-fit: cover !important;
+    object-fit: cover !important;
   }
   .object-fit-xxl-fill {
-    -o-object-fit: fill !important;
-       object-fit: fill !important;
+    object-fit: fill !important;
   }
   .object-fit-xxl-scale {
-    -o-object-fit: scale-down !important;
-       object-fit: scale-down !important;
+    object-fit: scale-down !important;
   }
   .object-fit-xxl-none {
-    -o-object-fit: none !important;
-       object-fit: none !important;
+    object-fit: none !important;
   }
   .d-xxl-inline {
     display: inline !important;
@@ -11957,28 +11789,22 @@ textarea.form-control-lg {
     row-gap: 3rem !important;
   }
   .column-gap-xxl-0 {
-    -moz-column-gap: 0 !important;
-         column-gap: 0 !important;
+    column-gap: 0 !important;
   }
   .column-gap-xxl-1 {
-    -moz-column-gap: 0.25rem !important;
-         column-gap: 0.25rem !important;
+    column-gap: 0.25rem !important;
   }
   .column-gap-xxl-2 {
-    -moz-column-gap: 0.5rem !important;
-         column-gap: 0.5rem !important;
+    column-gap: 0.5rem !important;
   }
   .column-gap-xxl-3 {
-    -moz-column-gap: 1rem !important;
-         column-gap: 1rem !important;
+    column-gap: 1rem !important;
   }
   .column-gap-xxl-4 {
-    -moz-column-gap: 1.5rem !important;
-         column-gap: 1.5rem !important;
+    column-gap: 1.5rem !important;
   }
   .column-gap-xxl-5 {
-    -moz-column-gap: 3rem !important;
-         column-gap: 3rem !important;
+    column-gap: 3rem !important;
   }
   .text-xxl-start {
     text-align: left !important;
@@ -12038,4 +11864,6 @@ textarea.form-control-lg {
   .d-print-none {
     display: none !important;
   }
-}/*# sourceMappingURL=darkly-compact.css.map */
\ No newline at end of file
+}
+
+/*# sourceMappingURL=darkly-compact.css.map */
diff --git a/src/assets/css/themes/darkly-red.css b/src/assets/css/themes/darkly-red.css
index 4a7459cd..3fadd294 100644
--- a/src/assets/css/themes/darkly-red.css
+++ b/src/assets/css/themes/darkly-red.css
@@ -726,7 +726,11 @@ progress {
 
 .container,
 .container-fluid,
-.container-lg {
+.container-xxl,
+.container-xl,
+.container-lg,
+.container-md,
+.container-sm {
   --bs-gutter-x: 1.5rem;
   --bs-gutter-y: 0;
   width: 100%;
@@ -736,11 +740,31 @@ progress {
   margin-left: auto;
 }
 
+@media (min-width: 576px) {
+  .container-sm, .container {
+    max-width: 540px;
+  }
+}
+@media (min-width: 768px) {
+  .container-md, .container-sm, .container {
+    max-width: 720px;
+  }
+}
 @media (min-width: 992px) {
   .container-lg, .container-md, .container-sm, .container {
+    max-width: 960px;
+  }
+}
+@media (min-width: 1200px) {
+  .container-xl, .container-lg, .container-md, .container-sm, .container {
     max-width: 1140px;
   }
 }
+@media (min-width: 1400px) {
+  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
+    max-width: 1320px;
+  }
+}
 :root {
   --bs-breakpoint-xs: 0;
   --bs-breakpoint-sm: 576px;
@@ -3867,7 +3891,11 @@ textarea.form-control-lg {
 }
 .navbar > .container,
 .navbar > .container-fluid,
-.navbar > .container-lg {
+.navbar > .container-sm,
+.navbar > .container-md,
+.navbar > .container-lg,
+.navbar > .container-xl,
+.navbar > .container-xxl {
   display: flex;
   flex-wrap: inherit;
   align-items: center;
diff --git a/src/assets/css/themes/darkly.css b/src/assets/css/themes/darkly.css
index e8ac2263..5b7e8a06 100644
--- a/src/assets/css/themes/darkly.css
+++ b/src/assets/css/themes/darkly.css
@@ -726,7 +726,11 @@ progress {
 
 .container,
 .container-fluid,
-.container-lg {
+.container-xxl,
+.container-xl,
+.container-lg,
+.container-md,
+.container-sm {
   --bs-gutter-x: 1.5rem;
   --bs-gutter-y: 0;
   width: 100%;
@@ -736,11 +740,31 @@ progress {
   margin-left: auto;
 }
 
+@media (min-width: 576px) {
+  .container-sm, .container {
+    max-width: 540px;
+  }
+}
+@media (min-width: 768px) {
+  .container-md, .container-sm, .container {
+    max-width: 720px;
+  }
+}
 @media (min-width: 992px) {
   .container-lg, .container-md, .container-sm, .container {
+    max-width: 960px;
+  }
+}
+@media (min-width: 1200px) {
+  .container-xl, .container-lg, .container-md, .container-sm, .container {
     max-width: 1140px;
   }
 }
+@media (min-width: 1400px) {
+  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
+    max-width: 1320px;
+  }
+}
 :root {
   --bs-breakpoint-xs: 0;
   --bs-breakpoint-sm: 576px;
@@ -3867,7 +3891,11 @@ textarea.form-control-lg {
 }
 .navbar > .container,
 .navbar > .container-fluid,
-.navbar > .container-lg {
+.navbar > .container-sm,
+.navbar > .container-md,
+.navbar > .container-lg,
+.navbar > .container-xl,
+.navbar > .container-xxl {
   display: flex;
   flex-wrap: inherit;
   align-items: center;
diff --git a/src/assets/css/themes/litely-compact.css b/src/assets/css/themes/litely-compact.css
index 3cfc3474..89bb4c6a 100644
--- a/src/assets/css/themes/litely-compact.css
+++ b/src/assets/css/themes/litely-compact.css
@@ -309,11 +309,9 @@ p {
 }
 
 abbr[title] {
-  -webkit-text-decoration: underline dotted;
-          text-decoration: underline dotted;
+  text-decoration: underline dotted;
   cursor: help;
-  -webkit-text-decoration-skip-ink: none;
-          text-decoration-skip-ink: none;
+  text-decoration-skip-ink: none;
 }
 
 address {
@@ -2130,9 +2128,7 @@ progress {
   background-color: var(--bs-body-bg);
   background-clip: padding-box;
   border: var(--bs-border-width) solid var(--bs-border-color);
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
+  appearance: none;
   border-radius: var(--bs-border-radius);
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
@@ -2163,10 +2159,6 @@ progress {
   display: block;
   padding: 0;
 }
-.form-control::-moz-placeholder {
-  color: var(--bs-secondary-color);
-  opacity: 1;
-}
 .form-control::placeholder {
   color: var(--bs-secondary-color);
   opacity: 1;
@@ -2178,8 +2170,7 @@ progress {
 .form-control::file-selector-button {
   padding: 0.375rem 0.75rem;
   margin: -0.375rem -0.75rem;
-  -webkit-margin-end: 0.75rem;
-          margin-inline-end: 0.75rem;
+  margin-inline-end: 0.75rem;
   color: var(--bs-body-color);
   background-color: var(--bs-tertiary-bg);
   pointer-events: none;
@@ -2227,8 +2218,7 @@ progress {
 .form-control-sm::file-selector-button {
   padding: 0.25rem 0.5rem;
   margin: -0.25rem -0.5rem;
-  -webkit-margin-end: 0.5rem;
-          margin-inline-end: 0.5rem;
+  margin-inline-end: 0.5rem;
 }
 
 .form-control-lg {
@@ -2240,8 +2230,7 @@ progress {
 .form-control-lg::file-selector-button {
   padding: 0.5rem 1rem;
   margin: -0.5rem -1rem;
-  -webkit-margin-end: 1rem;
-          margin-inline-end: 1rem;
+  margin-inline-end: 1rem;
 }
 
 textarea.form-control {
@@ -2294,9 +2283,7 @@ textarea.form-control-lg {
   border: var(--bs-border-width) solid var(--bs-border-color);
   border-radius: var(--bs-border-radius);
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
+  appearance: none;
 }
 @media (prefers-reduced-motion: reduce) {
   .form-select {
@@ -2374,11 +2361,8 @@ textarea.form-control-lg {
   background-position: center;
   background-size: contain;
   border: var(--bs-border-width) solid var(--bs-border-color);
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  -webkit-print-color-adjust: exact;
-          print-color-adjust: exact;
+  appearance: none;
+  print-color-adjust: exact;
 }
 .form-check-input[type=checkbox] {
   border-radius: 0.25em;
@@ -2477,9 +2461,7 @@ textarea.form-control-lg {
   height: 1.5rem;
   padding: 0;
   background-color: transparent;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
+  appearance: none;
 }
 .form-range:focus {
   outline: 0;
@@ -2500,14 +2482,11 @@ textarea.form-control-lg {
   background-color: #f1641e;
   border: 0;
   border-radius: 1rem;
-  -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  -webkit-appearance: none;
-          appearance: none;
+  appearance: none;
 }
 @media (prefers-reduced-motion: reduce) {
   .form-range::-webkit-slider-thumb {
-    -webkit-transition: none;
     transition: none;
   }
 }
@@ -2529,14 +2508,11 @@ textarea.form-control-lg {
   background-color: #f1641e;
   border: 0;
   border-radius: 1rem;
-  -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  -moz-appearance: none;
-       appearance: none;
+  appearance: none;
 }
 @media (prefers-reduced-motion: reduce) {
   .form-range::-moz-range-thumb {
-    -moz-transition: none;
     transition: none;
   }
 }
@@ -2597,17 +2573,10 @@ textarea.form-control-lg {
 .form-floating > .form-control-plaintext {
   padding: 1rem 0.75rem;
 }
-.form-floating > .form-control::-moz-placeholder, .form-floating > .form-control-plaintext::-moz-placeholder {
-  color: transparent;
-}
 .form-floating > .form-control::placeholder,
 .form-floating > .form-control-plaintext::placeholder {
   color: transparent;
 }
-.form-floating > .form-control:not(:-moz-placeholder-shown), .form-floating > .form-control-plaintext:not(:-moz-placeholder-shown) {
-  padding-top: 1.625rem;
-  padding-bottom: 0.625rem;
-}
 .form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown),
 .form-floating > .form-control-plaintext:focus,
 .form-floating > .form-control-plaintext:not(:placeholder-shown) {
@@ -2623,10 +2592,6 @@ textarea.form-control-lg {
   padding-top: 1.625rem;
   padding-bottom: 0.625rem;
 }
-.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
-  color: rgba(var(--bs-body-color-rgb), 0.65);
-  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
-}
 .form-floating > .form-control:focus ~ label,
 .form-floating > .form-control:not(:placeholder-shown) ~ label,
 .form-floating > .form-control-plaintext ~ label,
@@ -2634,15 +2599,6 @@ textarea.form-control-lg {
   color: rgba(var(--bs-body-color-rgb), 0.65);
   transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
 }
-.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label::after {
-  position: absolute;
-  inset: 1rem 0.375rem;
-  z-index: -1;
-  height: 1.5em;
-  content: "";
-  background-color: var(--bs-body-bg);
-  border-radius: var(--bs-border-radius);
-}
 .form-floating > .form-control:focus ~ label::after,
 .form-floating > .form-control:not(:placeholder-shown) ~ label::after,
 .form-floating > .form-control-plaintext ~ label::after,
@@ -2966,9 +2922,7 @@ textarea.form-control-lg {
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
+  user-select: none;
   border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
   border-radius: var(--bs-btn-border-radius);
   background-color: var(--bs-btn-bg);
@@ -5353,9 +5307,7 @@ textarea.form-control-lg {
 }
 .btn-close:disabled, .btn-close.disabled {
   pointer-events: none;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
+  user-select: none;
   opacity: var(--bs-btn-close-disabled-opacity);
 }
 
@@ -5405,7 +5357,6 @@ textarea.form-control-lg {
   --bs-toast-zindex: 1090;
   position: absolute;
   z-index: var(--bs-toast-zindex);
-  width: -moz-max-content;
   width: max-content;
   max-width: 100%;
   pointer-events: none;
@@ -6306,8 +6257,6 @@ textarea.form-control-lg {
     border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateX(-100%);
   }
-}
-@media (max-width: 575.98px) {
   .offcanvas-sm.offcanvas-end {
     top: 0;
     right: 0;
@@ -6315,8 +6264,6 @@ textarea.form-control-lg {
     border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateX(100%);
   }
-}
-@media (max-width: 575.98px) {
   .offcanvas-sm.offcanvas-top {
     top: 0;
     right: 0;
@@ -6326,8 +6273,6 @@ textarea.form-control-lg {
     border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateY(-100%);
   }
-}
-@media (max-width: 575.98px) {
   .offcanvas-sm.offcanvas-bottom {
     right: 0;
     left: 0;
@@ -6336,13 +6281,9 @@ textarea.form-control-lg {
     border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateY(100%);
   }
-}
-@media (max-width: 575.98px) {
   .offcanvas-sm.showing, .offcanvas-sm.show:not(.hiding) {
     transform: none;
   }
-}
-@media (max-width: 575.98px) {
   .offcanvas-sm.showing, .offcanvas-sm.hiding, .offcanvas-sm.show {
     visibility: visible;
   }
@@ -6394,8 +6335,6 @@ textarea.form-control-lg {
     border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateX(-100%);
   }
-}
-@media (max-width: 767.98px) {
   .offcanvas-md.offcanvas-end {
     top: 0;
     right: 0;
@@ -6403,8 +6342,6 @@ textarea.form-control-lg {
     border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateX(100%);
   }
-}
-@media (max-width: 767.98px) {
   .offcanvas-md.offcanvas-top {
     top: 0;
     right: 0;
@@ -6414,8 +6351,6 @@ textarea.form-control-lg {
     border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateY(-100%);
   }
-}
-@media (max-width: 767.98px) {
   .offcanvas-md.offcanvas-bottom {
     right: 0;
     left: 0;
@@ -6424,13 +6359,9 @@ textarea.form-control-lg {
     border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateY(100%);
   }
-}
-@media (max-width: 767.98px) {
   .offcanvas-md.showing, .offcanvas-md.show:not(.hiding) {
     transform: none;
   }
-}
-@media (max-width: 767.98px) {
   .offcanvas-md.showing, .offcanvas-md.hiding, .offcanvas-md.show {
     visibility: visible;
   }
@@ -6482,8 +6413,6 @@ textarea.form-control-lg {
     border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateX(-100%);
   }
-}
-@media (max-width: 991.98px) {
   .offcanvas-lg.offcanvas-end {
     top: 0;
     right: 0;
@@ -6491,8 +6420,6 @@ textarea.form-control-lg {
     border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateX(100%);
   }
-}
-@media (max-width: 991.98px) {
   .offcanvas-lg.offcanvas-top {
     top: 0;
     right: 0;
@@ -6502,8 +6429,6 @@ textarea.form-control-lg {
     border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateY(-100%);
   }
-}
-@media (max-width: 991.98px) {
   .offcanvas-lg.offcanvas-bottom {
     right: 0;
     left: 0;
@@ -6512,13 +6437,9 @@ textarea.form-control-lg {
     border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateY(100%);
   }
-}
-@media (max-width: 991.98px) {
   .offcanvas-lg.showing, .offcanvas-lg.show:not(.hiding) {
     transform: none;
   }
-}
-@media (max-width: 991.98px) {
   .offcanvas-lg.showing, .offcanvas-lg.hiding, .offcanvas-lg.show {
     visibility: visible;
   }
@@ -6570,8 +6491,6 @@ textarea.form-control-lg {
     border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateX(-100%);
   }
-}
-@media (max-width: 1199.98px) {
   .offcanvas-xl.offcanvas-end {
     top: 0;
     right: 0;
@@ -6579,8 +6498,6 @@ textarea.form-control-lg {
     border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateX(100%);
   }
-}
-@media (max-width: 1199.98px) {
   .offcanvas-xl.offcanvas-top {
     top: 0;
     right: 0;
@@ -6590,8 +6507,6 @@ textarea.form-control-lg {
     border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateY(-100%);
   }
-}
-@media (max-width: 1199.98px) {
   .offcanvas-xl.offcanvas-bottom {
     right: 0;
     left: 0;
@@ -6600,13 +6515,9 @@ textarea.form-control-lg {
     border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateY(100%);
   }
-}
-@media (max-width: 1199.98px) {
   .offcanvas-xl.showing, .offcanvas-xl.show:not(.hiding) {
     transform: none;
   }
-}
-@media (max-width: 1199.98px) {
   .offcanvas-xl.showing, .offcanvas-xl.hiding, .offcanvas-xl.show {
     visibility: visible;
   }
@@ -6658,8 +6569,6 @@ textarea.form-control-lg {
     border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateX(-100%);
   }
-}
-@media (max-width: 1399.98px) {
   .offcanvas-xxl.offcanvas-end {
     top: 0;
     right: 0;
@@ -6667,8 +6576,6 @@ textarea.form-control-lg {
     border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateX(100%);
   }
-}
-@media (max-width: 1399.98px) {
   .offcanvas-xxl.offcanvas-top {
     top: 0;
     right: 0;
@@ -6678,8 +6585,6 @@ textarea.form-control-lg {
     border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateY(-100%);
   }
-}
-@media (max-width: 1399.98px) {
   .offcanvas-xxl.offcanvas-bottom {
     right: 0;
     left: 0;
@@ -6688,13 +6593,9 @@ textarea.form-control-lg {
     border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateY(100%);
   }
-}
-@media (max-width: 1399.98px) {
   .offcanvas-xxl.showing, .offcanvas-xxl.show:not(.hiding) {
     transform: none;
   }
-}
-@media (max-width: 1399.98px) {
   .offcanvas-xxl.showing, .offcanvas-xxl.hiding, .offcanvas-xxl.show {
     visibility: visible;
   }
@@ -6849,17 +6750,14 @@ textarea.form-control-lg {
   }
 }
 .placeholder-wave {
-  -webkit-mask-image: linear-gradient(130deg, #222 55%, rgba(0, 0, 0, 0.8) 75%, #222 95%);
-          mask-image: linear-gradient(130deg, #222 55%, rgba(0, 0, 0, 0.8) 75%, #222 95%);
-  -webkit-mask-size: 200% 100%;
-          mask-size: 200% 100%;
+  mask-image: linear-gradient(130deg, #222 55%, rgba(0, 0, 0, 0.8) 75%, #222 95%);
+  mask-size: 200% 100%;
   animation: placeholder-wave 2s linear infinite;
 }
 
 @keyframes placeholder-wave {
   100% {
-    -webkit-mask-position: -200% 0%;
-            mask-position: -200% 0%;
+    mask-position: -200% 0%;
   }
 }
 .clearfix::after {
@@ -7232,28 +7130,23 @@ textarea.form-control-lg {
 }
 
 .object-fit-contain {
-  -o-object-fit: contain !important;
-     object-fit: contain !important;
+  object-fit: contain !important;
 }
 
 .object-fit-cover {
-  -o-object-fit: cover !important;
-     object-fit: cover !important;
+  object-fit: cover !important;
 }
 
 .object-fit-fill {
-  -o-object-fit: fill !important;
-     object-fit: fill !important;
+  object-fit: fill !important;
 }
 
 .object-fit-scale {
-  -o-object-fit: scale-down !important;
-     object-fit: scale-down !important;
+  object-fit: scale-down !important;
 }
 
 .object-fit-none {
-  -o-object-fit: none !important;
-     object-fit: none !important;
+  object-fit: none !important;
 }
 
 .opacity-0 {
@@ -8333,33 +8226,27 @@ textarea.form-control-lg {
 }
 
 .column-gap-0 {
-  -moz-column-gap: 0 !important;
-       column-gap: 0 !important;
+  column-gap: 0 !important;
 }
 
 .column-gap-1 {
-  -moz-column-gap: 0.25rem !important;
-       column-gap: 0.25rem !important;
+  column-gap: 0.25rem !important;
 }
 
 .column-gap-2 {
-  -moz-column-gap: 0.5rem !important;
-       column-gap: 0.5rem !important;
+  column-gap: 0.5rem !important;
 }
 
 .column-gap-3 {
-  -moz-column-gap: 1rem !important;
-       column-gap: 1rem !important;
+  column-gap: 1rem !important;
 }
 
 .column-gap-4 {
-  -moz-column-gap: 1.5rem !important;
-       column-gap: 1.5rem !important;
+  column-gap: 1.5rem !important;
 }
 
 .column-gap-5 {
-  -moz-column-gap: 3rem !important;
-       column-gap: 3rem !important;
+  column-gap: 3rem !important;
 }
 
 .font-monospace {
@@ -8915,21 +8802,15 @@ textarea.form-control-lg {
 }
 
 .user-select-all {
-  -webkit-user-select: all !important;
-     -moz-user-select: all !important;
-          user-select: all !important;
+  user-select: all !important;
 }
 
 .user-select-auto {
-  -webkit-user-select: auto !important;
-     -moz-user-select: auto !important;
-          user-select: auto !important;
+  user-select: auto !important;
 }
 
 .user-select-none {
-  -webkit-user-select: none !important;
-     -moz-user-select: none !important;
-          user-select: none !important;
+  user-select: none !important;
 }
 
 .pe-none {
@@ -9195,24 +9076,19 @@ textarea.form-control-lg {
     float: none !important;
   }
   .object-fit-sm-contain {
-    -o-object-fit: contain !important;
-       object-fit: contain !important;
+    object-fit: contain !important;
   }
   .object-fit-sm-cover {
-    -o-object-fit: cover !important;
-       object-fit: cover !important;
+    object-fit: cover !important;
   }
   .object-fit-sm-fill {
-    -o-object-fit: fill !important;
-       object-fit: fill !important;
+    object-fit: fill !important;
   }
   .object-fit-sm-scale {
-    -o-object-fit: scale-down !important;
-       object-fit: scale-down !important;
+    object-fit: scale-down !important;
   }
   .object-fit-sm-none {
-    -o-object-fit: none !important;
-       object-fit: none !important;
+    object-fit: none !important;
   }
   .d-sm-inline {
     display: inline !important;
@@ -9712,28 +9588,22 @@ textarea.form-control-lg {
     row-gap: 3rem !important;
   }
   .column-gap-sm-0 {
-    -moz-column-gap: 0 !important;
-         column-gap: 0 !important;
+    column-gap: 0 !important;
   }
   .column-gap-sm-1 {
-    -moz-column-gap: 0.25rem !important;
-         column-gap: 0.25rem !important;
+    column-gap: 0.25rem !important;
   }
   .column-gap-sm-2 {
-    -moz-column-gap: 0.5rem !important;
-         column-gap: 0.5rem !important;
+    column-gap: 0.5rem !important;
   }
   .column-gap-sm-3 {
-    -moz-column-gap: 1rem !important;
-         column-gap: 1rem !important;
+    column-gap: 1rem !important;
   }
   .column-gap-sm-4 {
-    -moz-column-gap: 1.5rem !important;
-         column-gap: 1.5rem !important;
+    column-gap: 1.5rem !important;
   }
   .column-gap-sm-5 {
-    -moz-column-gap: 3rem !important;
-         column-gap: 3rem !important;
+    column-gap: 3rem !important;
   }
   .text-sm-start {
     text-align: left !important;
@@ -9756,24 +9626,19 @@ textarea.form-control-lg {
     float: none !important;
   }
   .object-fit-md-contain {
-    -o-object-fit: contain !important;
-       object-fit: contain !important;
+    object-fit: contain !important;
   }
   .object-fit-md-cover {
-    -o-object-fit: cover !important;
-       object-fit: cover !important;
+    object-fit: cover !important;
   }
   .object-fit-md-fill {
-    -o-object-fit: fill !important;
-       object-fit: fill !important;
+    object-fit: fill !important;
   }
   .object-fit-md-scale {
-    -o-object-fit: scale-down !important;
-       object-fit: scale-down !important;
+    object-fit: scale-down !important;
   }
   .object-fit-md-none {
-    -o-object-fit: none !important;
-       object-fit: none !important;
+    object-fit: none !important;
   }
   .d-md-inline {
     display: inline !important;
@@ -10273,28 +10138,22 @@ textarea.form-control-lg {
     row-gap: 3rem !important;
   }
   .column-gap-md-0 {
-    -moz-column-gap: 0 !important;
-         column-gap: 0 !important;
+    column-gap: 0 !important;
   }
   .column-gap-md-1 {
-    -moz-column-gap: 0.25rem !important;
-         column-gap: 0.25rem !important;
+    column-gap: 0.25rem !important;
   }
   .column-gap-md-2 {
-    -moz-column-gap: 0.5rem !important;
-         column-gap: 0.5rem !important;
+    column-gap: 0.5rem !important;
   }
   .column-gap-md-3 {
-    -moz-column-gap: 1rem !important;
-         column-gap: 1rem !important;
+    column-gap: 1rem !important;
   }
   .column-gap-md-4 {
-    -moz-column-gap: 1.5rem !important;
-         column-gap: 1.5rem !important;
+    column-gap: 1.5rem !important;
   }
   .column-gap-md-5 {
-    -moz-column-gap: 3rem !important;
-         column-gap: 3rem !important;
+    column-gap: 3rem !important;
   }
   .text-md-start {
     text-align: left !important;
@@ -10317,24 +10176,19 @@ textarea.form-control-lg {
     float: none !important;
   }
   .object-fit-lg-contain {
-    -o-object-fit: contain !important;
-       object-fit: contain !important;
+    object-fit: contain !important;
   }
   .object-fit-lg-cover {
-    -o-object-fit: cover !important;
-       object-fit: cover !important;
+    object-fit: cover !important;
   }
   .object-fit-lg-fill {
-    -o-object-fit: fill !important;
-       object-fit: fill !important;
+    object-fit: fill !important;
   }
   .object-fit-lg-scale {
-    -o-object-fit: scale-down !important;
-       object-fit: scale-down !important;
+    object-fit: scale-down !important;
   }
   .object-fit-lg-none {
-    -o-object-fit: none !important;
-       object-fit: none !important;
+    object-fit: none !important;
   }
   .d-lg-inline {
     display: inline !important;
@@ -10834,28 +10688,22 @@ textarea.form-control-lg {
     row-gap: 3rem !important;
   }
   .column-gap-lg-0 {
-    -moz-column-gap: 0 !important;
-         column-gap: 0 !important;
+    column-gap: 0 !important;
   }
   .column-gap-lg-1 {
-    -moz-column-gap: 0.25rem !important;
-         column-gap: 0.25rem !important;
+    column-gap: 0.25rem !important;
   }
   .column-gap-lg-2 {
-    -moz-column-gap: 0.5rem !important;
-         column-gap: 0.5rem !important;
+    column-gap: 0.5rem !important;
   }
   .column-gap-lg-3 {
-    -moz-column-gap: 1rem !important;
-         column-gap: 1rem !important;
+    column-gap: 1rem !important;
   }
   .column-gap-lg-4 {
-    -moz-column-gap: 1.5rem !important;
-         column-gap: 1.5rem !important;
+    column-gap: 1.5rem !important;
   }
   .column-gap-lg-5 {
-    -moz-column-gap: 3rem !important;
-         column-gap: 3rem !important;
+    column-gap: 3rem !important;
   }
   .text-lg-start {
     text-align: left !important;
@@ -10878,24 +10726,19 @@ textarea.form-control-lg {
     float: none !important;
   }
   .object-fit-xl-contain {
-    -o-object-fit: contain !important;
-       object-fit: contain !important;
+    object-fit: contain !important;
   }
   .object-fit-xl-cover {
-    -o-object-fit: cover !important;
-       object-fit: cover !important;
+    object-fit: cover !important;
   }
   .object-fit-xl-fill {
-    -o-object-fit: fill !important;
-       object-fit: fill !important;
+    object-fit: fill !important;
   }
   .object-fit-xl-scale {
-    -o-object-fit: scale-down !important;
-       object-fit: scale-down !important;
+    object-fit: scale-down !important;
   }
   .object-fit-xl-none {
-    -o-object-fit: none !important;
-       object-fit: none !important;
+    object-fit: none !important;
   }
   .d-xl-inline {
     display: inline !important;
@@ -11395,28 +11238,22 @@ textarea.form-control-lg {
     row-gap: 3rem !important;
   }
   .column-gap-xl-0 {
-    -moz-column-gap: 0 !important;
-         column-gap: 0 !important;
+    column-gap: 0 !important;
   }
   .column-gap-xl-1 {
-    -moz-column-gap: 0.25rem !important;
-         column-gap: 0.25rem !important;
+    column-gap: 0.25rem !important;
   }
   .column-gap-xl-2 {
-    -moz-column-gap: 0.5rem !important;
-         column-gap: 0.5rem !important;
+    column-gap: 0.5rem !important;
   }
   .column-gap-xl-3 {
-    -moz-column-gap: 1rem !important;
-         column-gap: 1rem !important;
+    column-gap: 1rem !important;
   }
   .column-gap-xl-4 {
-    -moz-column-gap: 1.5rem !important;
-         column-gap: 1.5rem !important;
+    column-gap: 1.5rem !important;
   }
   .column-gap-xl-5 {
-    -moz-column-gap: 3rem !important;
-         column-gap: 3rem !important;
+    column-gap: 3rem !important;
   }
   .text-xl-start {
     text-align: left !important;
@@ -11439,24 +11276,19 @@ textarea.form-control-lg {
     float: none !important;
   }
   .object-fit-xxl-contain {
-    -o-object-fit: contain !important;
-       object-fit: contain !important;
+    object-fit: contain !important;
   }
   .object-fit-xxl-cover {
-    -o-object-fit: cover !important;
-       object-fit: cover !important;
+    object-fit: cover !important;
   }
   .object-fit-xxl-fill {
-    -o-object-fit: fill !important;
-       object-fit: fill !important;
+    object-fit: fill !important;
   }
   .object-fit-xxl-scale {
-    -o-object-fit: scale-down !important;
-       object-fit: scale-down !important;
+    object-fit: scale-down !important;
   }
   .object-fit-xxl-none {
-    -o-object-fit: none !important;
-       object-fit: none !important;
+    object-fit: none !important;
   }
   .d-xxl-inline {
     display: inline !important;
@@ -11956,28 +11788,22 @@ textarea.form-control-lg {
     row-gap: 3rem !important;
   }
   .column-gap-xxl-0 {
-    -moz-column-gap: 0 !important;
-         column-gap: 0 !important;
+    column-gap: 0 !important;
   }
   .column-gap-xxl-1 {
-    -moz-column-gap: 0.25rem !important;
-         column-gap: 0.25rem !important;
+    column-gap: 0.25rem !important;
   }
   .column-gap-xxl-2 {
-    -moz-column-gap: 0.5rem !important;
-         column-gap: 0.5rem !important;
+    column-gap: 0.5rem !important;
   }
   .column-gap-xxl-3 {
-    -moz-column-gap: 1rem !important;
-         column-gap: 1rem !important;
+    column-gap: 1rem !important;
   }
   .column-gap-xxl-4 {
-    -moz-column-gap: 1.5rem !important;
-         column-gap: 1.5rem !important;
+    column-gap: 1.5rem !important;
   }
   .column-gap-xxl-5 {
-    -moz-column-gap: 3rem !important;
-         column-gap: 3rem !important;
+    column-gap: 3rem !important;
   }
   .text-xxl-start {
     text-align: left !important;
@@ -12037,4 +11863,6 @@ textarea.form-control-lg {
   .d-print-none {
     display: none !important;
   }
-}/*# sourceMappingURL=litely-compact.css.map */
\ No newline at end of file
+}
+
+/*# sourceMappingURL=litely-compact.css.map */
diff --git a/src/assets/css/themes/litely-red.css b/src/assets/css/themes/litely-red.css
index ba1a7f88..23aa4cbc 100644
--- a/src/assets/css/themes/litely-red.css
+++ b/src/assets/css/themes/litely-red.css
@@ -725,7 +725,11 @@ progress {
 
 .container,
 .container-fluid,
-.container-lg {
+.container-xxl,
+.container-xl,
+.container-lg,
+.container-md,
+.container-sm {
   --bs-gutter-x: 1.5rem;
   --bs-gutter-y: 0;
   width: 100%;
@@ -735,11 +739,31 @@ progress {
   margin-left: auto;
 }
 
+@media (min-width: 576px) {
+  .container-sm, .container {
+    max-width: 540px;
+  }
+}
+@media (min-width: 768px) {
+  .container-md, .container-sm, .container {
+    max-width: 720px;
+  }
+}
 @media (min-width: 992px) {
   .container-lg, .container-md, .container-sm, .container {
+    max-width: 960px;
+  }
+}
+@media (min-width: 1200px) {
+  .container-xl, .container-lg, .container-md, .container-sm, .container {
     max-width: 1140px;
   }
 }
+@media (min-width: 1400px) {
+  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
+    max-width: 1320px;
+  }
+}
 :root {
   --bs-breakpoint-xs: 0;
   --bs-breakpoint-sm: 576px;
@@ -3866,7 +3890,11 @@ textarea.form-control-lg {
 }
 .navbar > .container,
 .navbar > .container-fluid,
-.navbar > .container-lg {
+.navbar > .container-sm,
+.navbar > .container-md,
+.navbar > .container-lg,
+.navbar > .container-xl,
+.navbar > .container-xxl {
   display: flex;
   flex-wrap: inherit;
   align-items: center;
diff --git a/src/assets/css/themes/litely.css b/src/assets/css/themes/litely.css
index 5a482c58..89f2d48b 100644
--- a/src/assets/css/themes/litely.css
+++ b/src/assets/css/themes/litely.css
@@ -725,7 +725,11 @@ progress {
 
 .container,
 .container-fluid,
-.container-lg {
+.container-xxl,
+.container-xl,
+.container-lg,
+.container-md,
+.container-sm {
   --bs-gutter-x: 1.5rem;
   --bs-gutter-y: 0;
   width: 100%;
@@ -735,11 +739,31 @@ progress {
   margin-left: auto;
 }
 
+@media (min-width: 576px) {
+  .container-sm, .container {
+    max-width: 540px;
+  }
+}
+@media (min-width: 768px) {
+  .container-md, .container-sm, .container {
+    max-width: 720px;
+  }
+}
 @media (min-width: 992px) {
   .container-lg, .container-md, .container-sm, .container {
+    max-width: 960px;
+  }
+}
+@media (min-width: 1200px) {
+  .container-xl, .container-lg, .container-md, .container-sm, .container {
     max-width: 1140px;
   }
 }
+@media (min-width: 1400px) {
+  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
+    max-width: 1320px;
+  }
+}
 :root {
   --bs-breakpoint-xs: 0;
   --bs-breakpoint-sm: 576px;
@@ -3866,7 +3890,11 @@ textarea.form-control-lg {
 }
 .navbar > .container,
 .navbar > .container-fluid,
-.navbar > .container-lg {
+.navbar > .container-sm,
+.navbar > .container-md,
+.navbar > .container-lg,
+.navbar > .container-xl,
+.navbar > .container-xxl {
   display: flex;
   flex-wrap: inherit;
   align-items: center;
diff --git a/src/shared/components/community/community.tsx b/src/shared/components/community/community.tsx
index 111b47cd..191f8ae3 100644
--- a/src/shared/components/community/community.tsx
+++ b/src/shared/components/community/community.tsx
@@ -317,7 +317,7 @@ export class Community extends Component<
             />
 
             <div className="row">
-              <div className="col-12 col-md-8">
+              <div className="col-12 col-md-8 col-lg-9">
                 {this.communityInfo(res)}
                 <div className="d-block d-md-none">
                   <button
@@ -340,7 +340,7 @@ export class Community extends Component<
                 {this.listings(res)}
                 <Paginator page={page} onChange={this.handlePageChange} />
               </div>
-              <div className="d-none d-md-block col-md-4">
+              <div className="d-none d-md-block col-md-4 col-lg-3">
                 {this.sidebar(res)}
               </div>
             </div>
diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx
index 7fa942af..5ef1a87d 100644
--- a/src/shared/components/home/home.tsx
+++ b/src/shared/components/home/home.tsx
@@ -387,7 +387,7 @@ export class Home extends Component<any, HomeState> {
         />
         {site_setup && (
           <div className="row">
-            <main role="main" className="col-12 col-md-8">
+            <main role="main" className="col-12 col-md-8 col-lg-9">
               {tagline && (
                 <div
                   id="tagline"
@@ -397,7 +397,7 @@ export class Home extends Component<any, HomeState> {
               <div className="d-block d-md-none">{this.mobileView}</div>
               {this.posts}
             </main>
-            <aside className="d-none d-md-block col-md-4">
+            <aside className="d-none d-md-block col-md-4 col-lg-3">
               {this.mySidebar}
             </aside>
           </div>
diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index 092e253e..75d026a5 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -1413,10 +1413,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                 my_vote={this.postView.my_vote}
               />
             )}
-            <div className="col-sm-2 pe-0 post-media">
+            <div className="col-sm-1 col-md-2 pe-0 post-media">
               <div className="">{this.thumbnail()}</div>
             </div>
-            <div className="col-12 col-sm-9">
+            <div className="col-12 col-sm-8 col-md-9 ">
               <div className="row">
                 <div className="col-12">
                   {this.postTitleLine()}
diff --git a/src/shared/components/post/post.tsx b/src/shared/components/post/post.tsx
index f0aa3ff5..fe7897ff 100644
--- a/src/shared/components/post/post.tsx
+++ b/src/shared/components/post/post.tsx
@@ -348,7 +348,7 @@ export class Post extends Component<any, PostState> {
         const res = this.state.postRes.data;
         return (
           <div className="row">
-            <div className="col-12 col-md-8 mb-3">
+            <div className="col-12 col-md-8 col-lg-9 mb-3">
               <HtmlTags
                 title={this.documentTitle}
                 path={this.context.router.route.match.url}
@@ -416,7 +416,9 @@ export class Post extends Component<any, PostState> {
               {this.state.commentViewType == CommentViewType.Flat &&
                 this.commentsFlat()}
             </div>
-            <div className="d-none d-md-block col-md-4">{this.sidebar()}</div>
+            <div className="d-none d-md-block col-md-4 col-lg-3">
+              {this.sidebar()}
+            </div>
           </div>
         );
       }

From 528aed7f58b74c73bf4187839b7cbf0e90d78267 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sun, 25 Jun 2023 16:33:11 -0400
Subject: [PATCH 02/17] feat(UI): Hide avatars on listings

---
 src/shared/components/post/post-listing.tsx  | 11 +++++++++--
 src/shared/components/post/post-listings.tsx |  1 +
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index 76a3e445..a27d8334 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -106,6 +106,7 @@ interface PostListingProps {
   siteLanguages: number[];
   showCommunity?: boolean;
   showBody?: boolean;
+  hideAvatars?: boolean;
   hideImage?: boolean;
   enableDownvotes?: boolean;
   enableNsfw?: boolean;
@@ -397,7 +398,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const post_view = this.postView;
     return (
       <span className="small">
-        <PersonListing person={post_view.creator} />
+        <PersonListing
+          person={post_view.creator}
+          hideAvatar={this.props.hideAvatars}
+        />
         {this.creatorIsMod_ && (
           <span className="mx-1 badge text-bg-light">
             {I18NextService.i18n.t("mod")}
@@ -417,7 +421,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           <>
             {" "}
             {I18NextService.i18n.t("to")}{" "}
-            <CommunityLink community={post_view.community} />
+            <CommunityLink
+              community={post_view.community}
+              hideAvatar={this.props.hideAvatars}
+            />
           </>
         )}
         {post_view.post.language_id !== 0 && (
diff --git a/src/shared/components/post/post-listings.tsx b/src/shared/components/post/post-listings.tsx
index 1fdaeba2..29bbf588 100644
--- a/src/shared/components/post/post-listings.tsx
+++ b/src/shared/components/post/post-listings.tsx
@@ -76,6 +76,7 @@ export class PostListings extends Component<PostListingsProps, any> {
                 showCommunity={this.props.showCommunity}
                 enableDownvotes={this.props.enableDownvotes}
                 enableNsfw={this.props.enableNsfw}
+                hideAvatars={true}
                 viewOnly={this.props.viewOnly}
                 allLanguages={this.props.allLanguages}
                 siteLanguages={this.props.siteLanguages}

From 4800a408fde13dbbb8c55e1e4a1fea567d0426b1 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sun, 25 Jun 2023 14:41:20 -0400
Subject: [PATCH 03/17] fix: Make navbar container full screen width #1536

---
 src/shared/components/app/navbar.tsx | 612 ++++++++++++++-------------
 1 file changed, 308 insertions(+), 304 deletions(-)

diff --git a/src/shared/components/app/navbar.tsx b/src/shared/components/app/navbar.tsx
index 11cfb6c6..5c017189 100644
--- a/src/shared/components/app/navbar.tsx
+++ b/src/shared/components/app/navbar.tsx
@@ -79,256 +79,246 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
     const siteView = this.props.siteRes?.site_view;
     const person = UserService.Instance.myUserInfo?.local_user_view.person;
     return (
-      <nav
-        className="navbar navbar-expand-md navbar-light shadow-sm p-0 px-3 container-lg"
-        id="navbar"
-      >
-        <NavLink
-          id="navTitle"
-          to="/"
-          title={siteView?.site.description ?? siteView?.site.name}
-          className="d-flex align-items-center navbar-brand me-md-3"
-          onMouseUp={linkEvent(this, handleCollapseClick)}
+      <div className="shadow-sm">
+        <nav
+          className="navbar navbar-expand-md navbar-light p-0 px-3 container-lg"
+          id="navbar"
         >
-          {siteView?.site.icon && showAvatars() && (
-            <PictrsImage src={siteView.site.icon} icon />
-          )}
-          {siteView?.site.name}
-        </NavLink>
-        {person && (
-          <ul className="navbar-nav d-flex flex-row ms-auto d-md-none">
-            <li id="navMessages" className="nav-item nav-item-icon">
-              <NavLink
-                to="/inbox"
-                className="p-1 nav-link border-0 nav-messages"
-                title={I18NextService.i18n.t("unread_messages", {
-                  count: Number(this.state.unreadApplicationCountRes.state),
-                  formattedCount: numToSI(this.unreadInboxCount),
-                })}
-                onMouseUp={linkEvent(this, handleCollapseClick)}
-              >
-                <Icon icon="bell" />
-                {this.unreadInboxCount > 0 && (
-                  <span className="mx-1 badge text-bg-light">
-                    {numToSI(this.unreadInboxCount)}
-                  </span>
-                )}
-              </NavLink>
-            </li>
-            {this.moderatesSomething && (
-              <li className="nav-item nav-item-icon">
+          <NavLink
+            id="navTitle"
+            to="/"
+            title={siteView?.site.description ?? siteView?.site.name}
+            className="d-flex align-items-center navbar-brand me-md-3"
+            onMouseUp={linkEvent(this, handleCollapseClick)}
+          >
+            {siteView?.site.icon && showAvatars() && (
+              <PictrsImage src={siteView.site.icon} icon />
+            )}
+            {siteView?.site.name}
+          </NavLink>
+          {person && (
+            <ul className="navbar-nav d-flex flex-row ms-auto d-md-none">
+              <li id="navMessages" className="nav-item nav-item-icon">
                 <NavLink
-                  to="/reports"
-                  className="p-1 nav-link border-0"
-                  title={I18NextService.i18n.t("unread_reports", {
-                    count: Number(this.unreadReportCount),
-                    formattedCount: numToSI(this.unreadReportCount),
+                  to="/inbox"
+                  className="p-1 nav-link border-0 nav-messages"
+                  title={I18NextService.i18n.t("unread_messages", {
+                    count: Number(this.state.unreadApplicationCountRes.state),
+                    formattedCount: numToSI(this.unreadInboxCount),
                   })}
                   onMouseUp={linkEvent(this, handleCollapseClick)}
                 >
-                  <Icon icon="shield" />
-                  {this.unreadReportCount > 0 && (
+                  <Icon icon="bell" />
+                  {this.unreadInboxCount > 0 && (
                     <span className="mx-1 badge text-bg-light">
-                      {numToSI(this.unreadReportCount)}
+                      {numToSI(this.unreadInboxCount)}
                     </span>
                   )}
                 </NavLink>
               </li>
-            )}
-            {amAdmin() && (
-              <li className="nav-item nav-item-icon">
-                <NavLink
-                  to="/registration_applications"
-                  className="p-1 nav-link border-0"
-                  title={I18NextService.i18n.t(
-                    "unread_registration_applications",
-                    {
-                      count: Number(this.unreadApplicationCount),
-                      formattedCount: numToSI(this.unreadApplicationCount),
-                    }
-                  )}
-                  onMouseUp={linkEvent(this, handleCollapseClick)}
-                >
-                  <Icon icon="clipboard" />
-                  {this.unreadApplicationCount > 0 && (
-                    <span className="mx-1 badge text-bg-light">
-                      {numToSI(this.unreadApplicationCount)}
-                    </span>
-                  )}
-                </NavLink>
-              </li>
-            )}
-          </ul>
-        )}
-        <button
-          className="navbar-toggler border-0 p-1"
-          type="button"
-          aria-label="menu"
-          data-tippy-content={I18NextService.i18n.t("expand_here")}
-          data-bs-toggle="collapse"
-          data-bs-target="#navbarDropdown"
-          aria-controls="navbarDropdown"
-          aria-expanded="false"
-          ref={this.collapseButtonRef}
-        >
-          <Icon icon="menu" />
-        </button>
-        <div
-          className="collapse navbar-collapse my-2"
-          id="navbarDropdown"
-          ref={this.mobileMenuRef}
-        >
-          <ul id="navbarLinks" className="me-auto navbar-nav">
-            <li className="nav-item">
-              <NavLink
-                to="/communities"
-                className="nav-link"
-                title={I18NextService.i18n.t("communities")}
-                onMouseUp={linkEvent(this, handleCollapseClick)}
-              >
-                {I18NextService.i18n.t("communities")}
-              </NavLink>
-            </li>
-            <li className="nav-item">
-              {/* TODO make sure this works: https://github.com/infernojs/inferno/issues/1608 */}
-              <NavLink
-                to={{
-                  pathname: "/create_post",
-                  search: "",
-                  hash: "",
-                  key: "",
-                  state: { prevPath: this.currentLocation },
-                }}
-                className="nav-link"
-                title={I18NextService.i18n.t("create_post")}
-                onMouseUp={linkEvent(this, handleCollapseClick)}
-              >
-                {I18NextService.i18n.t("create_post")}
-              </NavLink>
-            </li>
-            {this.props.siteRes && canCreateCommunity(this.props.siteRes) && (
-              <li className="nav-item">
-                <NavLink
-                  to="/create_community"
-                  className="nav-link"
-                  title={I18NextService.i18n.t("create_community")}
-                  onMouseUp={linkEvent(this, handleCollapseClick)}
-                >
-                  {I18NextService.i18n.t("create_community")}
-                </NavLink>
-              </li>
-            )}
-            <li className="nav-item">
-              <a
-                className="nav-link d-inline-flex align-items-center d-md-inline-block"
-                title={I18NextService.i18n.t("support_lemmy")}
-                href={donateLemmyUrl}
-              >
-                <Icon icon="heart" classes="small" />
-                <span className="d-inline ms-1 d-md-none ms-md-0">
-                  {I18NextService.i18n.t("support_lemmy")}
-                </span>
-              </a>
-            </li>
-          </ul>
-          <ul id="navbarIcons" className="navbar-nav">
-            <li id="navSearch" className="nav-item">
-              <NavLink
-                to="/search"
-                className="nav-link d-inline-flex align-items-center d-md-inline-block"
-                title={I18NextService.i18n.t("search")}
-                onMouseUp={linkEvent(this, handleCollapseClick)}
-              >
-                <Icon icon="search" />
-                <span className="d-inline ms-1 d-md-none ms-md-0">
-                  {I18NextService.i18n.t("search")}
-                </span>
-              </NavLink>
-            </li>
-            {amAdmin() && (
-              <li id="navAdmin" className="nav-item">
-                <NavLink
-                  to="/admin"
-                  className="nav-link d-inline-flex align-items-center d-md-inline-block"
-                  title={I18NextService.i18n.t("admin_settings")}
-                  onMouseUp={linkEvent(this, handleCollapseClick)}
-                >
-                  <Icon icon="settings" />
-                  <span className="d-inline ms-1 d-md-none ms-md-0">
-                    {I18NextService.i18n.t("admin_settings")}
-                  </span>
-                </NavLink>
-              </li>
-            )}
-            {person ? (
-              <>
-                <li id="navMessages" className="nav-item">
+              {this.moderatesSomething && (
+                <li className="nav-item nav-item-icon">
                   <NavLink
-                    className="nav-link d-inline-flex align-items-center d-md-inline-block"
-                    to="/inbox"
-                    title={I18NextService.i18n.t("unread_messages", {
-                      count: Number(this.unreadInboxCount),
-                      formattedCount: numToSI(this.unreadInboxCount),
+                    to="/reports"
+                    className="p-1 nav-link border-0"
+                    title={I18NextService.i18n.t("unread_reports", {
+                      count: Number(this.unreadReportCount),
+                      formattedCount: numToSI(this.unreadReportCount),
                     })}
                     onMouseUp={linkEvent(this, handleCollapseClick)}
                   >
-                    <Icon icon="bell" />
-                    <span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
-                      {I18NextService.i18n.t("unread_messages", {
-                        count: Number(this.unreadInboxCount),
-                        formattedCount: numToSI(this.unreadInboxCount),
-                      })}
-                    </span>
-                    {this.unreadInboxCount > 0 && (
+                    <Icon icon="shield" />
+                    {this.unreadReportCount > 0 && (
                       <span className="mx-1 badge text-bg-light">
-                        {numToSI(this.unreadInboxCount)}
+                        {numToSI(this.unreadReportCount)}
                       </span>
                     )}
                   </NavLink>
                 </li>
-                {this.moderatesSomething && (
-                  <li id="navModeration" className="nav-item">
+              )}
+              {amAdmin() && (
+                <li className="nav-item nav-item-icon">
+                  <NavLink
+                    to="/registration_applications"
+                    className="p-1 nav-link border-0"
+                    title={I18NextService.i18n.t(
+                      "unread_registration_applications",
+                      {
+                        count: Number(this.unreadApplicationCount),
+                        formattedCount: numToSI(this.unreadApplicationCount),
+                      }
+                    )}
+                    onMouseUp={linkEvent(this, handleCollapseClick)}
+                  >
+                    <Icon icon="clipboard" />
+                    {this.unreadApplicationCount > 0 && (
+                      <span className="mx-1 badge text-bg-light">
+                        {numToSI(this.unreadApplicationCount)}
+                      </span>
+                    )}
+                  </NavLink>
+                </li>
+              )}
+            </ul>
+          )}
+          <button
+            className="navbar-toggler border-0 p-1"
+            type="button"
+            aria-label="menu"
+            data-tippy-content={I18NextService.i18n.t("expand_here")}
+            data-bs-toggle="collapse"
+            data-bs-target="#navbarDropdown"
+            aria-controls="navbarDropdown"
+            aria-expanded="false"
+            ref={this.collapseButtonRef}
+          >
+            <Icon icon="menu" />
+          </button>
+          <div
+            className="collapse navbar-collapse my-2"
+            id="navbarDropdown"
+            ref={this.mobileMenuRef}
+          >
+            <ul id="navbarLinks" className="me-auto navbar-nav">
+              <li className="nav-item">
+                <NavLink
+                  to="/communities"
+                  className="nav-link"
+                  title={I18NextService.i18n.t("communities")}
+                  onMouseUp={linkEvent(this, handleCollapseClick)}
+                >
+                  {I18NextService.i18n.t("communities")}
+                </NavLink>
+              </li>
+              <li className="nav-item">
+                {/* TODO make sure this works: https://github.com/infernojs/inferno/issues/1608 */}
+                <NavLink
+                  to={{
+                    pathname: "/create_post",
+                    search: "",
+                    hash: "",
+                    key: "",
+                    state: { prevPath: this.currentLocation },
+                  }}
+                  className="nav-link"
+                  title={I18NextService.i18n.t("create_post")}
+                  onMouseUp={linkEvent(this, handleCollapseClick)}
+                >
+                  {I18NextService.i18n.t("create_post")}
+                </NavLink>
+              </li>
+              {this.props.siteRes && canCreateCommunity(this.props.siteRes) && (
+                <li className="nav-item">
+                  <NavLink
+                    to="/create_community"
+                    className="nav-link"
+                    title={I18NextService.i18n.t("create_community")}
+                    onMouseUp={linkEvent(this, handleCollapseClick)}
+                  >
+                    {I18NextService.i18n.t("create_community")}
+                  </NavLink>
+                </li>
+              )}
+              <li className="nav-item">
+                <a
+                  className="nav-link d-inline-flex align-items-center d-md-inline-block"
+                  title={I18NextService.i18n.t("support_lemmy")}
+                  href={donateLemmyUrl}
+                >
+                  <Icon icon="heart" classes="small" />
+                  <span className="d-inline ms-1 d-md-none ms-md-0">
+                    {I18NextService.i18n.t("support_lemmy")}
+                  </span>
+                </a>
+              </li>
+            </ul>
+            <ul id="navbarIcons" className="navbar-nav">
+              <li id="navSearch" className="nav-item">
+                <NavLink
+                  to="/search"
+                  className="nav-link d-inline-flex align-items-center d-md-inline-block"
+                  title={I18NextService.i18n.t("search")}
+                  onMouseUp={linkEvent(this, handleCollapseClick)}
+                >
+                  <Icon icon="search" />
+                  <span className="d-inline ms-1 d-md-none ms-md-0">
+                    {I18NextService.i18n.t("search")}
+                  </span>
+                </NavLink>
+              </li>
+              {amAdmin() && (
+                <li id="navAdmin" className="nav-item">
+                  <NavLink
+                    to="/admin"
+                    className="nav-link d-inline-flex align-items-center d-md-inline-block"
+                    title={I18NextService.i18n.t("admin_settings")}
+                    onMouseUp={linkEvent(this, handleCollapseClick)}
+                  >
+                    <Icon icon="settings" />
+                    <span className="d-inline ms-1 d-md-none ms-md-0">
+                      {I18NextService.i18n.t("admin_settings")}
+                    </span>
+                  </NavLink>
+                </li>
+              )}
+              {person ? (
+                <>
+                  <li id="navMessages" className="nav-item">
                     <NavLink
                       className="nav-link d-inline-flex align-items-center d-md-inline-block"
-                      to="/reports"
-                      title={I18NextService.i18n.t("unread_reports", {
-                        count: Number(this.unreadReportCount),
-                        formattedCount: numToSI(this.unreadReportCount),
+                      to="/inbox"
+                      title={I18NextService.i18n.t("unread_messages", {
+                        count: Number(this.unreadInboxCount),
+                        formattedCount: numToSI(this.unreadInboxCount),
                       })}
                       onMouseUp={linkEvent(this, handleCollapseClick)}
                     >
-                      <Icon icon="shield" />
+                      <Icon icon="bell" />
                       <span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
-                        {I18NextService.i18n.t("unread_reports", {
-                          count: Number(this.unreadReportCount),
-                          formattedCount: numToSI(this.unreadReportCount),
+                        {I18NextService.i18n.t("unread_messages", {
+                          count: Number(this.unreadInboxCount),
+                          formattedCount: numToSI(this.unreadInboxCount),
                         })}
                       </span>
-                      {this.unreadReportCount > 0 && (
+                      {this.unreadInboxCount > 0 && (
                         <span className="mx-1 badge text-bg-light">
-                          {numToSI(this.unreadReportCount)}
+                          {numToSI(this.unreadInboxCount)}
                         </span>
                       )}
                     </NavLink>
                   </li>
-                )}
-                {amAdmin() && (
-                  <li id="navApplications" className="nav-item">
-                    <NavLink
-                      to="/registration_applications"
-                      className="nav-link d-inline-flex align-items-center d-md-inline-block"
-                      title={I18NextService.i18n.t(
-                        "unread_registration_applications",
-                        {
-                          count: Number(this.unreadApplicationCount),
-                          formattedCount: numToSI(this.unreadApplicationCount),
-                        }
-                      )}
-                      onMouseUp={linkEvent(this, handleCollapseClick)}
-                    >
-                      <Icon icon="clipboard" />
-                      <span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
-                        {I18NextService.i18n.t(
+                  {this.moderatesSomething && (
+                    <li id="navModeration" className="nav-item">
+                      <NavLink
+                        className="nav-link d-inline-flex align-items-center d-md-inline-block"
+                        to="/reports"
+                        title={I18NextService.i18n.t("unread_reports", {
+                          count: Number(this.unreadReportCount),
+                          formattedCount: numToSI(this.unreadReportCount),
+                        })}
+                        onMouseUp={linkEvent(this, handleCollapseClick)}
+                      >
+                        <Icon icon="shield" />
+                        <span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
+                          {I18NextService.i18n.t("unread_reports", {
+                            count: Number(this.unreadReportCount),
+                            formattedCount: numToSI(this.unreadReportCount),
+                          })}
+                        </span>
+                        {this.unreadReportCount > 0 && (
+                          <span className="mx-1 badge text-bg-light">
+                            {numToSI(this.unreadReportCount)}
+                          </span>
+                        )}
+                      </NavLink>
+                    </li>
+                  )}
+                  {amAdmin() && (
+                    <li id="navApplications" className="nav-item">
+                      <NavLink
+                        to="/registration_applications"
+                        className="nav-link d-inline-flex align-items-center d-md-inline-block"
+                        title={I18NextService.i18n.t(
                           "unread_registration_applications",
                           {
                             count: Number(this.unreadApplicationCount),
@@ -337,97 +327,111 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                             ),
                           }
                         )}
-                      </span>
-                      {this.unreadApplicationCount > 0 && (
-                        <span className="mx-1 badge text-bg-light">
-                          {numToSI(this.unreadApplicationCount)}
+                        onMouseUp={linkEvent(this, handleCollapseClick)}
+                      >
+                        <Icon icon="clipboard" />
+                        <span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
+                          {I18NextService.i18n.t(
+                            "unread_registration_applications",
+                            {
+                              count: Number(this.unreadApplicationCount),
+                              formattedCount: numToSI(
+                                this.unreadApplicationCount
+                              ),
+                            }
+                          )}
                         </span>
-                      )}
+                        {this.unreadApplicationCount > 0 && (
+                          <span className="mx-1 badge text-bg-light">
+                            {numToSI(this.unreadApplicationCount)}
+                          </span>
+                        )}
+                      </NavLink>
+                    </li>
+                  )}
+                  {person && (
+                    <li id="dropdownUser" className="dropdown">
+                      <button
+                        type="button"
+                        className="btn dropdown-toggle"
+                        aria-expanded="false"
+                        data-bs-toggle="dropdown"
+                      >
+                        {showAvatars() && person.avatar && (
+                          <PictrsImage src={person.avatar} icon />
+                        )}
+                        {person.display_name ?? person.name}
+                      </button>
+                      <ul
+                        className="dropdown-menu"
+                        style={{ "min-width": "fit-content" }}
+                      >
+                        <li>
+                          <NavLink
+                            to={`/u/${person.name}`}
+                            className="dropdown-item px-2"
+                            title={I18NextService.i18n.t("profile")}
+                            onMouseUp={linkEvent(this, handleCollapseClick)}
+                          >
+                            <Icon icon="user" classes="me-1" />
+                            {I18NextService.i18n.t("profile")}
+                          </NavLink>
+                        </li>
+                        <li>
+                          <NavLink
+                            to="/settings"
+                            className="dropdown-item px-2"
+                            title={I18NextService.i18n.t("settings")}
+                            onMouseUp={linkEvent(this, handleCollapseClick)}
+                          >
+                            <Icon icon="settings" classes="me-1" />
+                            {I18NextService.i18n.t("settings")}
+                          </NavLink>
+                        </li>
+                        <li>
+                          <hr className="dropdown-divider" />
+                        </li>
+                        <li>
+                          <button
+                            className="dropdown-item btn btn-link px-2"
+                            onClick={linkEvent(this, handleLogOut)}
+                          >
+                            <Icon icon="log-out" classes="me-1" />
+                            {I18NextService.i18n.t("logout")}
+                          </button>
+                        </li>
+                      </ul>
+                    </li>
+                  )}
+                </>
+              ) : (
+                <>
+                  <li className="nav-item">
+                    <NavLink
+                      to="/login"
+                      className="nav-link"
+                      title={I18NextService.i18n.t("login")}
+                      onMouseUp={linkEvent(this, handleCollapseClick)}
+                    >
+                      {I18NextService.i18n.t("login")}
                     </NavLink>
                   </li>
-                )}
-                {person && (
-                  <li id="dropdownUser" className="dropdown">
-                    <button
-                      type="button"
-                      className="btn dropdown-toggle"
-                      aria-expanded="false"
-                      data-bs-toggle="dropdown"
+                  <li className="nav-item">
+                    <NavLink
+                      to="/signup"
+                      className="nav-link"
+                      title={I18NextService.i18n.t("sign_up")}
+                      onMouseUp={linkEvent(this, handleCollapseClick)}
                     >
-                      {showAvatars() && person.avatar && (
-                        <PictrsImage src={person.avatar} icon />
-                      )}
-                      {person.display_name ?? person.name}
-                    </button>
-                    <ul
-                      className="dropdown-menu"
-                      style={{ "min-width": "fit-content" }}
-                    >
-                      <li>
-                        <NavLink
-                          to={`/u/${person.name}`}
-                          className="dropdown-item px-2"
-                          title={I18NextService.i18n.t("profile")}
-                          onMouseUp={linkEvent(this, handleCollapseClick)}
-                        >
-                          <Icon icon="user" classes="me-1" />
-                          {I18NextService.i18n.t("profile")}
-                        </NavLink>
-                      </li>
-                      <li>
-                        <NavLink
-                          to="/settings"
-                          className="dropdown-item px-2"
-                          title={I18NextService.i18n.t("settings")}
-                          onMouseUp={linkEvent(this, handleCollapseClick)}
-                        >
-                          <Icon icon="settings" classes="me-1" />
-                          {I18NextService.i18n.t("settings")}
-                        </NavLink>
-                      </li>
-                      <li>
-                        <hr className="dropdown-divider" />
-                      </li>
-                      <li>
-                        <button
-                          className="dropdown-item btn btn-link px-2"
-                          onClick={linkEvent(this, handleLogOut)}
-                        >
-                          <Icon icon="log-out" classes="me-1" />
-                          {I18NextService.i18n.t("logout")}
-                        </button>
-                      </li>
-                    </ul>
+                      {I18NextService.i18n.t("sign_up")}
+                    </NavLink>
                   </li>
-                )}
-              </>
-            ) : (
-              <>
-                <li className="nav-item">
-                  <NavLink
-                    to="/login"
-                    className="nav-link"
-                    title={I18NextService.i18n.t("login")}
-                    onMouseUp={linkEvent(this, handleCollapseClick)}
-                  >
-                    {I18NextService.i18n.t("login")}
-                  </NavLink>
-                </li>
-                <li className="nav-item">
-                  <NavLink
-                    to="/signup"
-                    className="nav-link"
-                    title={I18NextService.i18n.t("sign_up")}
-                    onMouseUp={linkEvent(this, handleCollapseClick)}
-                  >
-                    {I18NextService.i18n.t("sign_up")}
-                  </NavLink>
-                </li>
-              </>
-            )}
-          </ul>
-        </div>
-      </nav>
+                </>
+              )}
+            </ul>
+          </div>
+        </nav>
+      </div>
     );
   }
 

From 5fdbaa0dd97edd7a303b933b0613db928f1f1179 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sun, 25 Jun 2023 19:29:14 -0400
Subject: [PATCH 04/17] fix: Tidy up divs

---
 src/shared/components/common/vote-buttons.tsx |  2 +-
 src/shared/components/post/post-listing.tsx   | 36 +++++++++----------
 2 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/src/shared/components/common/vote-buttons.tsx b/src/shared/components/common/vote-buttons.tsx
index 09799188..1b4f4890 100644
--- a/src/shared/components/common/vote-buttons.tsx
+++ b/src/shared/components/common/vote-buttons.tsx
@@ -174,7 +174,7 @@ export class VoteButtons extends Component<VoteButtonsProps, VoteButtonsState> {
 
   render() {
     return (
-      <div className={`vote-bar col-1 pe-0 small text-center`}>
+      <div className={`vote-bar pe-0 small text-center`}>
         <button
           type="button"
           className={`btn-animate btn btn-link p-0 ${
diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index f4fc8fea..70ec2c86 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -1407,30 +1407,28 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         <div className="d-none d-sm-block">
           <article className="row post-container">
             {!this.props.viewOnly && (
-              <VoteButtons
-                voteContentType={VoteContentType.Post}
-                id={this.postView.post.id}
-                onVote={this.props.onPostVote}
-                enableDownvotes={this.props.enableDownvotes}
-                counts={this.postView.counts}
-                my_vote={this.postView.my_vote}
-              />
+              <div className="col-1">
+                <VoteButtons
+                  voteContentType={VoteContentType.Post}
+                  id={this.postView.post.id}
+                  onVote={this.props.onPostVote}
+                  enableDownvotes={this.props.enableDownvotes}
+                  counts={this.postView.counts}
+                  my_vote={this.postView.my_vote}
+                />
+              </div>
             )}
             <div className="col-sm-1 col-md-2 pe-0 post-media">
               <div className="">{this.thumbnail()}</div>
             </div>
             <div className="col-12 col-sm-8 col-md-9 ">
-              <div className="row">
-                <div className="col-12">
-                  {this.postTitleLine()}
-                  {this.createdLine()}
-                  {this.showBodyPreview()}
-                  {this.commentsLine()}
-                  {this.duplicatesLine()}
-                  {this.userActionsLine()}
-                  {this.removeAndBanDialogs()}
-                </div>
-              </div>
+              {this.postTitleLine()}
+              {this.createdLine()}
+              {this.showBodyPreview()}
+              {this.commentsLine()}
+              {this.duplicatesLine()}
+              {this.userActionsLine()}
+              {this.removeAndBanDialogs()}
             </div>
           </article>
         </div>

From 424d29847bd3d5decd8182418ecb3ffba7623840 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sun, 25 Jun 2023 19:40:49 -0400
Subject: [PATCH 05/17] fix: Set max height on post listing thumbnails

---
 src/assets/css/main.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index a80bee31..43aad0c2 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -200,6 +200,7 @@ blockquote {
   object-fit: cover;
   aspect-ratio: 4/3;
   width: 100%;
+  max-height: 6rem;
 }
 
 .thumbnail svg {

From a90c34eb7f79eb136e912297524b0b64766b08e6 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sun, 25 Jun 2023 19:46:27 -0400
Subject: [PATCH 06/17] fix: Fix a too-small thumbnail column

---
 src/shared/components/post/post-listing.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index 70ec2c86..a79c8c25 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -1418,10 +1418,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                 />
               </div>
             )}
-            <div className="col-sm-1 col-md-2 pe-0 post-media">
+            <div className="col-sm-2 pe-0 post-media">
               <div className="">{this.thumbnail()}</div>
             </div>
-            <div className="col-12 col-sm-8 col-md-9 ">
+            <div className="col-12 col-sm-9">
               {this.postTitleLine()}
               {this.createdLine()}
               {this.showBodyPreview()}

From 271425b963bcc44ff9289fa227ed8d930f3174d7 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sun, 25 Jun 2023 20:00:43 -0400
Subject: [PATCH 07/17] fix: Fix post listing vote/image/title widths

---
 src/shared/components/post/post-listing.tsx | 28 ++++++++++++---------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index a79c8c25..4e17fa21 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -1407,7 +1407,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         <div className="d-none d-sm-block">
           <article className="row post-container">
             {!this.props.viewOnly && (
-              <div className="col-1">
+              <div className="col-auto">
                 <VoteButtons
                   voteContentType={VoteContentType.Post}
                   id={this.postView.post.id}
@@ -1418,17 +1418,21 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                 />
               </div>
             )}
-            <div className="col-sm-2 pe-0 post-media">
-              <div className="">{this.thumbnail()}</div>
-            </div>
-            <div className="col-12 col-sm-9">
-              {this.postTitleLine()}
-              {this.createdLine()}
-              {this.showBodyPreview()}
-              {this.commentsLine()}
-              {this.duplicatesLine()}
-              {this.userActionsLine()}
-              {this.removeAndBanDialogs()}
+            <div className="col-sm-10">
+              <div className="row">
+                <div className="col-sm-3 col-lg-2 pe-0 post-media">
+                  <div className="">{this.thumbnail()}</div>
+                </div>
+                <div className="col-12 col-sm-9 col-lg-10">
+                  {this.postTitleLine()}
+                  {this.createdLine()}
+                  {this.showBodyPreview()}
+                  {this.commentsLine()}
+                  {this.duplicatesLine()}
+                  {this.userActionsLine()}
+                  {this.removeAndBanDialogs()}
+                </div>
+              </div>
             </div>
           </article>
         </div>

From ce3c30896106e2ad308962b712b607d7f153e621 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sun, 25 Jun 2023 20:06:34 -0400
Subject: [PATCH 08/17] fix: Fix image/title wrapping on small

---
 src/shared/components/post/post-listing.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index 4e17fa21..d25e59be 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -1407,7 +1407,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         <div className="d-none d-sm-block">
           <article className="row post-container">
             {!this.props.viewOnly && (
-              <div className="col-auto">
+              <div className="col flex-grow-0">
                 <VoteButtons
                   voteContentType={VoteContentType.Post}
                   id={this.postView.post.id}
@@ -1418,7 +1418,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                 />
               </div>
             )}
-            <div className="col-sm-10">
+            <div className="col flex-grow-1">
               <div className="row">
                 <div className="col-sm-3 col-lg-2 pe-0 post-media">
                   <div className="">{this.thumbnail()}</div>

From e6909d4cd1e67f5ebb890eaa34be3c6dbf2b2bdd Mon Sep 17 00:00:00 2001
From: Alec Armbruster <35377827+alectrocute@users.noreply.github.com>
Date: Mon, 26 Jun 2023 09:25:00 -0400
Subject: [PATCH 09/17] fix bug collapsing previews when voting

---
 src/shared/components/post/post-listing.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index 449f6963..c423b2ce 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -42,6 +42,7 @@ import {
   SavePost,
   TransferCommunity,
 } from "lemmy-js-client";
+import deepEqual from "lodash.isequal";
 import { relTags } from "../../config";
 import {
   BanType,
@@ -168,7 +169,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   }
 
   componentWillReceiveProps(nextProps: PostListingProps) {
-    if (this.props !== nextProps) {
+    if (!deepEqual(this.props, nextProps)) {
       this.setState({
         purgeLoading: false,
         reportLoading: false,
@@ -183,7 +184,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         addModLoading: false,
         addAdminLoading: false,
         transferLoading: false,
-        imageExpanded: false,
       });
     }
   }

From 81131d2804076860cdbb0deda89923b410da9483 Mon Sep 17 00:00:00 2001
From: Alec Armbruster <35377827+alectrocute@users.noreply.github.com>
Date: Mon, 26 Jun 2023 12:16:32 -0400
Subject: [PATCH 10/17] remove hook entirely

---
 src/shared/components/post/post-listing.tsx | 21 ---------------------
 1 file changed, 21 deletions(-)

diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index c423b2ce..ca9f9dad 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -42,7 +42,6 @@ import {
   SavePost,
   TransferCommunity,
 } from "lemmy-js-client";
-import deepEqual from "lodash.isequal";
 import { relTags } from "../../config";
 import {
   BanType,
@@ -168,26 +167,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     this.handleEditCancel = this.handleEditCancel.bind(this);
   }
 
-  componentWillReceiveProps(nextProps: PostListingProps) {
-    if (!deepEqual(this.props, nextProps)) {
-      this.setState({
-        purgeLoading: false,
-        reportLoading: false,
-        blockLoading: false,
-        lockLoading: false,
-        deleteLoading: false,
-        removeLoading: false,
-        saveLoading: false,
-        featureCommunityLoading: false,
-        featureLocalLoading: false,
-        banLoading: false,
-        addModLoading: false,
-        addAdminLoading: false,
-        transferLoading: false,
-      });
-    }
-  }
-
   get postView(): PostView {
     return this.props.post_view;
   }

From 170bd7d693645d7d21905802edb6c7f92fbae494 Mon Sep 17 00:00:00 2001
From: Pascal de Vink <pascal@pascaldevink.nl>
Date: Mon, 26 Jun 2023 21:45:56 +0100
Subject: [PATCH 11/17] Fix feedback on banning an unbanning

 When banning or unbanning, the API call was done, but updating the
frontend failed. This caused a confusing experience for an admin, until
the page was reloaded.
---
 src/shared/components/person/profile.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/shared/components/person/profile.tsx b/src/shared/components/person/profile.tsx
index d0003687..c70fc3e1 100644
--- a/src/shared/components/person/profile.tsx
+++ b/src/shared/components/person/profile.tsx
@@ -204,6 +204,7 @@ export class Profile extends Component<
     this.handleSavePost = this.handleSavePost.bind(this);
     this.handlePurgePost = this.handlePurgePost.bind(this);
     this.handleFeaturePost = this.handleFeaturePost.bind(this);
+    this.handleModBanSubmit = this.handleModBanSubmit.bind(this);
 
     // Only fetch the data if coming from another route
     if (FirstLoadService.isFirstLoad) {
@@ -989,6 +990,7 @@ export class Profile extends Component<
           s.personRes.data.comments
             .filter(c => c.creator.id == banRes.data.person_view.person.id)
             .forEach(c => (c.creator.banned = banRes.data.banned));
+          s.personRes.data.person_view.person.banned = banRes.data.banned;
         }
         return s;
       });

From 6dc9c6376b7102992076ee032e3104e059e0fe8b Mon Sep 17 00:00:00 2001
From: Pascal de Vink <pascal@pascaldevink.nl>
Date: Mon, 26 Jun 2023 20:46:15 +0100
Subject: [PATCH 12/17] Add space between cancel and ban button

When banning a user, the modal has two buttons: cancel and ban. These
buttons are so close to each other that it's hard to see they are
separate buttons.
By putting each button on their own row, there is more space between
them.
---
 src/shared/components/person/profile.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/shared/components/person/profile.tsx b/src/shared/components/person/profile.tsx
index d0003687..6015f6f6 100644
--- a/src/shared/components/person/profile.tsx
+++ b/src/shared/components/person/profile.tsx
@@ -693,6 +693,8 @@ export class Profile extends Component<
             >
               {I18NextService.i18n.t("cancel")}
             </button>
+          </div>
+          <div className="mb-3 row">
             <button
               type="submit"
               className="btn btn-secondary"

From 2b1647c9b8c479daef8ce3fb711b394e49f6ccce Mon Sep 17 00:00:00 2001
From: Alec Armbruster <35377827+alectrocute@users.noreply.github.com>
Date: Mon, 26 Jun 2023 17:04:19 -0400
Subject: [PATCH 13/17] partially revert change

---
 src/shared/components/post/post-listing.tsx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index dd6ba0cd..7b75818c 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -167,6 +167,26 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     this.handleEditCancel = this.handleEditCancel.bind(this);
   }
 
+  componentWillReceiveProps(nextProps: PostListingProps) {
+    if (this.props !== nextProps) {
+      this.setState({
+        purgeLoading: false,
+        reportLoading: false,
+        blockLoading: false,
+        lockLoading: false,
+        deleteLoading: false,
+        removeLoading: false,
+        saveLoading: false,
+        featureCommunityLoading: false,
+        featureLocalLoading: false,
+        banLoading: false,
+        addModLoading: false,
+        addAdminLoading: false,
+        transferLoading: false,
+      });
+    }
+  }
+
   get postView(): PostView {
     return this.props.post_view;
   }

From 937ebfc649c3cdd2f8d6eccfd43173890d4fd615 Mon Sep 17 00:00:00 2001
From: Alec Armbruster <35377827+alectrocute@users.noreply.github.com>
Date: Mon, 26 Jun 2023 17:10:39 -0400
Subject: [PATCH 14/17] fix vote button alignment

---
 src/shared/components/common/vote-buttons.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/common/vote-buttons.tsx b/src/shared/components/common/vote-buttons.tsx
index 005db8c0..259d2161 100644
--- a/src/shared/components/common/vote-buttons.tsx
+++ b/src/shared/components/common/vote-buttons.tsx
@@ -104,7 +104,7 @@ export class VoteButtonsCompact extends Component<
 
   render() {
     return (
-      <div>
+      <>
         <button
           type="button"
           className={`btn-animate btn py-0 px-1 ${
@@ -157,7 +157,7 @@ export class VoteButtonsCompact extends Component<
             )}
           </button>
         )}
-      </div>
+      </>
     );
   }
 }

From f57bf3bb8b1fb6bf1ec8cad57668af25e1a4ba16 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Mon, 26 Jun 2023 18:07:10 -0400
Subject: [PATCH 15/17] fix: Restore icon avatars; make smaller and roundrect

---
 src/assets/css/main.css                       |  5 +++--
 src/shared/components/common/pictrs-image.tsx |  2 +-
 src/shared/components/post/post-listing.tsx   | 12 +++---------
 src/shared/components/post/post-listings.tsx  |  1 -
 4 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index b917b3ec..41ec231b 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -360,8 +360,9 @@ br.big {
 }
 
 .img-icon {
-  width: 2rem;
-  height: 2rem;
+  width: calc(var(--bs-body-line-height) * 1em);
+  height: calc(var(--bs-body-line-height) * 1em);
+  border-radius: 0.25em;
 }
 
 .tribute-container ul {
diff --git a/src/shared/components/common/pictrs-image.tsx b/src/shared/components/common/pictrs-image.tsx
index 31fb1229..9c14aefc 100644
--- a/src/shared/components/common/pictrs-image.tsx
+++ b/src/shared/components/common/pictrs-image.tsx
@@ -39,7 +39,7 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
             "img-expanded slight-radius":
               !this.props.thumbnail && !this.props.icon,
             "img-blur": this.props.thumbnail && this.props.nsfw,
-            "rounded-circle img-cover img-icon me-2": this.props.icon,
+            "img-cover img-icon me-1": this.props.icon,
             "ms-2 mb-0 rounded-circle img-cover avatar-overlay":
               this.props.iconOverlay,
             "avatar-pushup": this.props.pushup,
diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index 3883b9a1..a7064f05 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -106,7 +106,7 @@ interface PostListingProps {
   siteLanguages: number[];
   showCommunity?: boolean;
   showBody?: boolean;
-  hideAvatars?: boolean;
+  smallAvatars?: boolean;
   hideImage?: boolean;
   enableDownvotes?: boolean;
   enableNsfw?: boolean;
@@ -398,10 +398,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const post_view = this.postView;
     return (
       <span className="small">
-        <PersonListing
-          person={post_view.creator}
-          hideAvatar={this.props.hideAvatars}
-        />
+        <PersonListing person={post_view.creator} />
         {this.creatorIsMod_ && (
           <span className="mx-1 badge text-bg-light">
             {I18NextService.i18n.t("mod")}
@@ -421,10 +418,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           <>
             {" "}
             {I18NextService.i18n.t("to")}{" "}
-            <CommunityLink
-              community={post_view.community}
-              hideAvatar={this.props.hideAvatars}
-            />
+            <CommunityLink community={post_view.community} />
           </>
         )}
         {post_view.post.language_id !== 0 && (
diff --git a/src/shared/components/post/post-listings.tsx b/src/shared/components/post/post-listings.tsx
index 29bbf588..1fdaeba2 100644
--- a/src/shared/components/post/post-listings.tsx
+++ b/src/shared/components/post/post-listings.tsx
@@ -76,7 +76,6 @@ export class PostListings extends Component<PostListingsProps, any> {
                 showCommunity={this.props.showCommunity}
                 enableDownvotes={this.props.enableDownvotes}
                 enableNsfw={this.props.enableNsfw}
-                hideAvatars={true}
                 viewOnly={this.props.viewOnly}
                 allLanguages={this.props.allLanguages}
                 siteLanguages={this.props.siteLanguages}

From 319bb4116fb7052c4218a6e95df43cf68e032084 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Mon, 26 Jun 2023 19:46:29 -0400
Subject: [PATCH 16/17] fix: Remove smallavatars prop

---
 src/shared/components/post/post-listing.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index a7064f05..8c537678 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -106,7 +106,6 @@ interface PostListingProps {
   siteLanguages: number[];
   showCommunity?: boolean;
   showBody?: boolean;
-  smallAvatars?: boolean;
   hideImage?: boolean;
   enableDownvotes?: boolean;
   enableNsfw?: boolean;

From 5da6f2722758d23ced683a3052c2e9cdd117e9e3 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Mon, 26 Jun 2023 20:37:28 -0400
Subject: [PATCH 17/17] fix: Remove body preview

---
 src/shared/components/post/post-listing.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index d0d65bd7..f80cb970 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -1411,9 +1411,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               {/* If it has a thumbnail, do a right aligned thumbnail */}
               {this.mobileThumbnail()}
 
-              {/* Show a preview of the post body */}
-              {this.showBodyPreview()}
-
               {this.commentsLine(true)}
               {this.userActionsLine()}
               {this.duplicatesLine()}
@@ -1445,7 +1442,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                 <div className="col-12 col-sm-9 col-lg-10">
                   {this.postTitleLine()}
                   {this.createdLine()}
-                  {this.showBodyPreview()}
                   {this.commentsLine()}
                   {this.duplicatesLine()}
                   {this.userActionsLine()}