Fix broken file

src/assets/css/main.css

@@ -198,8 +198,7 @@ blockquote {
 
 .thumbnail {
   object-fit: cover;
-  min-height: 60px;
+  aspect-ratio: 4/3;
-  max-height: 80px;
   width: 100%;
 }
 
@@ -431,3 +430,8 @@ br.big {
 .skip-link:focus {
   top: 0;
 }
+
+.comment,
+.markdown-textarea {
+  max-width: 50rem;
+}

src/assets/css/themes/_variables.scss

@@ -1,6 +1,2 @@
 $link-decoration: none;
 $min-contrast-ratio: 3;
-
-$container-max-widths: (
-  lg: 1140px,
-);

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;
+  appearance: none;
-     -moz-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;
+  appearance: none;
-     -moz-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;
+  appearance: none;
-     -moz-appearance: none;
+  print-color-adjust: exact;
-          appearance: none;
-  -webkit-print-color-adjust: exact;
-          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;
+  appearance: none;
-     -moz-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;
+  user-select: none;
-     -moz-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;
+  user-select: none;
-     -moz-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%);
-          mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
+  mask-size: 200% 100%;
-  -webkit-mask-size: 200% 100%;
-          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;
+  user-select: all !important;
-     -moz-user-select: all !important;
-          user-select: all !important;
 }
 
 .user-select-auto {
-  -webkit-user-select: auto !important;
+  user-select: auto !important;
-     -moz-user-select: auto !important;
-          user-select: auto !important;
 }
 
 .user-select-none {
-  -webkit-user-select: none !important;
+  user-select: none !important;
-     -moz-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 */
+}
+
+/*# sourceMappingURL=darkly-compact.css.map */

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;

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;

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;
+  appearance: none;
-     -moz-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;
+  appearance: none;
-     -moz-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;
+  appearance: none;
-     -moz-appearance: none;
+  print-color-adjust: exact;
-          appearance: none;
-  -webkit-print-color-adjust: exact;
-          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;
+  appearance: none;
-     -moz-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;
+  user-select: none;
-     -moz-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;
+  user-select: none;
-     -moz-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%);
-          mask-image: linear-gradient(130deg, #222 55%, rgba(0, 0, 0, 0.8) 75%, #222 95%);
+  mask-size: 200% 100%;
-  -webkit-mask-size: 200% 100%;
-          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;
+  user-select: all !important;
-     -moz-user-select: all !important;
-          user-select: all !important;
 }
 
 .user-select-auto {
-  -webkit-user-select: auto !important;
+  user-select: auto !important;
-     -moz-user-select: auto !important;
-          user-select: auto !important;
 }
 
 .user-select-none {
-  -webkit-user-select: none !important;
+  user-select: none !important;
-     -moz-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 */
+}
+
+/*# sourceMappingURL=litely-compact.css.map */

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;

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;

src/shared/components/app/app.tsx

@@ -15,7 +15,7 @@ import { Theme } from "./theme";
 
 export class App extends Component<any, any> {
   private isoData: IsoDataOptionalSite = setIsoData(this.context);
-  private readonly mainContentRef: RefObject<HTMLElement>;
+  private readonly mainContentRef: RefObject<HTMLDivElement>;
   constructor(props: any, context: any) {
     super(props, context);
     this.mainContentRef = createRef();
@@ -44,7 +44,11 @@ export class App extends Component<any, any> {
               <Theme defaultTheme={siteView.local_site.default_theme} />
             )}
             <Navbar siteRes={siteRes} />
-            <div className="mt-4 p-0 fl-1">
+            <div
+              tabIndex={-1}
+              ref={this.mainContentRef}
+              className="mt-4 p-0 fl-1"
+            >
               <Switch>
                 {routes.map(
                   ({ path, component: RouteComponent, fetchInitialData }) => (
@@ -59,16 +63,14 @@ export class App extends Component<any, any> {
 
                         return (
                           <ErrorGuard>
-                            <main tabIndex={-1} ref={this.mainContentRef}>
+                            {RouteComponent &&
-                              {RouteComponent &&
+                              (isAuthPath(path ?? "") ? (
-                                (isAuthPath(path ?? "") ? (
+                                <AuthGuard>
-                                  <AuthGuard>
-                                    <RouteComponent {...routeProps} />
-                                  </AuthGuard>
-                                ) : (
                                   <RouteComponent {...routeProps} />
-                                ))}
+                                </AuthGuard>
-                            </main>
+                              ) : (
+                                <RouteComponent {...routeProps} />
+                              ))}
                           </ErrorGuard>
                         );
                       }}

src/shared/components/app/navbar.tsx

@@ -80,255 +80,245 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
     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"
+        className="navbar navbar-expand-md navbar-light shadow-sm p-0 px-3 container-flex"
         id="navbar"
       >
-        <NavLink
+        <div className="container-lg">
-          id="navTitle"
+          <NavLink
-          to="/"
+            id="navTitle"
-          title={siteView?.site.description ?? siteView?.site.name}
+            to="/"
-          className="d-flex align-items-center navbar-brand me-md-3"
+            title={siteView?.site.description ?? siteView?.site.name}
-          onMouseUp={linkEvent(this, handleCollapseClick)}
+            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.icon && showAvatars() && (
-          )}
+              <PictrsImage src={siteView.site.icon} icon />
-          {siteView?.site.name}
+            )}
-        </NavLink>
+            {siteView?.site.name}
-        {person && (
+          </NavLink>
-          <ul className="navbar-nav d-flex flex-row ms-auto d-md-none">
+          {person && (
-            <li id="navMessages" className="nav-item nav-item-icon">
+            <ul className="navbar-nav d-flex flex-row ms-auto d-md-none">
-              <NavLink
+              <li id="navMessages" className="nav-item nav-item-icon">
-                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
-                  to="/reports"
+                  to="/inbox"
-                  className="p-1 nav-link border-0"
+                  className="p-1 nav-link border-0 nav-messages"
-                  title={I18NextService.i18n.t("unread_reports", {
+                  title={I18NextService.i18n.t("unread_messages", {
-                    count: Number(this.unreadReportCount),
+                    count: Number(this.state.unreadApplicationCountRes.state),
-                    formattedCount: numToSI(this.unreadReportCount),
+                    formattedCount: numToSI(this.unreadInboxCount),
                   })}
                   onMouseUp={linkEvent(this, handleCollapseClick)}
                 >
-                  <Icon icon="shield" />
+                  <Icon icon="bell" />
-                  {this.unreadReportCount > 0 && (
+                  {this.unreadInboxCount > 0 && (
                     <span className="mx-1 badge text-bg-light">
-                      {numToSI(this.unreadReportCount)}
+                      {numToSI(this.unreadInboxCount)}
                     </span>
                   )}
                 </NavLink>
               </li>
-            )}
+              {this.moderatesSomething && (
-            {amAdmin() && (
+                <li className="nav-item nav-item-icon">
-              <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"
-                    to="/inbox"
+                    className="p-1 nav-link border-0"
-                    title={I18NextService.i18n.t("unread_messages", {
+                    title={I18NextService.i18n.t("unread_reports", {
-                      count: Number(this.unreadInboxCount),
+                      count: Number(this.unreadReportCount),
-                      formattedCount: numToSI(this.unreadInboxCount),
+                      formattedCount: numToSI(this.unreadReportCount),
                     })}
                     onMouseUp={linkEvent(this, handleCollapseClick)}
                   >
-                    <Icon icon="bell" />
+                    <Icon icon="shield" />
-                    <span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
+                    {this.unreadReportCount > 0 && (
-                      {I18NextService.i18n.t("unread_messages", {
-                        count: Number(this.unreadInboxCount),
-                        formattedCount: numToSI(this.unreadInboxCount),
-                      })}
-                    </span>
-                    {this.unreadInboxCount > 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"
+                      to="/inbox"
-                      title={I18NextService.i18n.t("unread_reports", {
+                      title={I18NextService.i18n.t("unread_messages", {
-                        count: Number(this.unreadReportCount),
+                        count: Number(this.unreadInboxCount),
-                        formattedCount: numToSI(this.unreadReportCount),
+                        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", {
+                        {I18NextService.i18n.t("unread_messages", {
-                          count: Number(this.unreadReportCount),
+                          count: Number(this.unreadInboxCount),
-                          formattedCount: numToSI(this.unreadReportCount),
+                          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>
-                )}
+                  {this.moderatesSomething && (
-                {amAdmin() && (
+                    <li id="navModeration" className="nav-item">
-                  <li id="navApplications" className="nav-item">
+                      <NavLink
-                    <NavLink
+                        className="nav-link d-inline-flex align-items-center d-md-inline-block"
-                      to="/registration_applications"
+                        to="/reports"
-                      className="nav-link d-inline-flex align-items-center d-md-inline-block"
+                        title={I18NextService.i18n.t("unread_reports", {
-                      title={I18NextService.i18n.t(
+                          count: Number(this.unreadReportCount),
-                        "unread_registration_applications",
+                          formattedCount: numToSI(this.unreadReportCount),
-                        {
+                        })}
-                          count: Number(this.unreadApplicationCount),
+                        onMouseUp={linkEvent(this, handleCollapseClick)}
-                          formattedCount: numToSI(this.unreadApplicationCount),
+                      >
-                        }
+                        <Icon icon="shield" />
-                      )}
+                        <span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
-                      onMouseUp={linkEvent(this, handleCollapseClick)}
+                          {I18NextService.i18n.t("unread_reports", {
-                    >
+                            count: Number(this.unreadReportCount),
-                      <Icon icon="clipboard" />
+                            formattedCount: numToSI(this.unreadReportCount),
-                      <span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
+                          })}
-                        {I18NextService.i18n.t(
+                        </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,95 +327,109 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                             ),
                           }
                         )}
-                      </span>
+                        onMouseUp={linkEvent(this, handleCollapseClick)}
-                      {this.unreadApplicationCount > 0 && (
+                      >
-                        <span className="mx-1 badge text-bg-light">
+                        <Icon icon="clipboard" />
-                          {numToSI(this.unreadApplicationCount)}
+                        <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>
-                )}
+                  <li className="nav-item">
-                {person && (
+                    <NavLink
-                  <li id="dropdownUser" className="dropdown">
+                      to="/signup"
-                    <button
+                      className="nav-link"
-                      type="button"
+                      title={I18NextService.i18n.t("sign_up")}
-                      className="btn dropdown-toggle"
+                      onMouseUp={linkEvent(this, handleCollapseClick)}
-                      aria-expanded="false"
-                      data-bs-toggle="dropdown"
                     >
-                      {showAvatars() && person.avatar && (
+                      {I18NextService.i18n.t("sign_up")}
-                        <PictrsImage src={person.avatar} icon />
+                    </NavLink>
-                      )}
-                      {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>
-                )}
+                </>
-              </>
+              )}
-            ) : (
+            </ul>
-              <>
+          </div>
-                <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>
     );

src/shared/components/comment/comment-form.tsx

@@ -1,6 +1,7 @@
 import { myAuthRequired } from "@utils/app";
 import getUserInterfaceLangId from "@utils/app/user-interface-language";
 import { capitalizeFirstLetter } from "@utils/helpers";
+import classNames from "classnames";
 import { Component } from "inferno";
 import { T } from "inferno-i18next-dess";
 import { Link } from "inferno-router";
@@ -45,9 +46,7 @@ export class CommentForm extends Component<CommentFormProps, any> {
 
     return (
       <div
-        className={["comment-form", "mb-3", this.props.containerClass].join(
+        className={classNames("comment-form mb-3", this.props.containerClass)}
-          " "
-        )}
       >
         {UserService.Instance.myUserInfo ? (
           <MarkdownTextArea

src/shared/components/common/markdown-textarea.tsx

@@ -156,171 +156,160 @@ export class MarkdownTextArea extends Component<
             !this.state.submitted
           }
         />
-        <div className="mb-3 row">
+        <div className="rounded bg-light border mb-3">
-          <div className="col-12">
+          <div className="d-flex flex-wrap border-bottom">
-            <div className="rounded bg-light border">
+            {this.getFormatButton("bold", this.handleInsertBold)}
-              <div className="d-flex flex-wrap border-bottom">
+            {this.getFormatButton("italic", this.handleInsertItalic)}
-                {this.getFormatButton("bold", this.handleInsertBold)}
+            {this.getFormatButton("link", this.handleInsertLink)}
-                {this.getFormatButton("italic", this.handleInsertItalic)}
+            <EmojiPicker
-                {this.getFormatButton("link", this.handleInsertLink)}
+              onEmojiClick={e => this.handleEmoji(this, e)}
-                <EmojiPicker
+              disabled={this.isDisabled}
-                  onEmojiClick={e => this.handleEmoji(this, e)}
+            ></EmojiPicker>
-                  disabled={this.isDisabled}
+            <form className="btn btn-sm text-muted fw-bold">
-                ></EmojiPicker>
+              <label
-                <form className="btn btn-sm text-muted fw-bold">
+                htmlFor={`file-upload-${this.id}`}
-                  <label
+                className={`mb-0 ${
-                    htmlFor={`file-upload-${this.id}`}
+                  UserService.Instance.myUserInfo && "pointer"
-                    className={`mb-0 ${
+                }`}
-                      UserService.Instance.myUserInfo && "pointer"
+                data-tippy-content={I18NextService.i18n.t("upload_image")}
-                    }`}
+              >
-                    data-tippy-content={I18NextService.i18n.t("upload_image")}
+                {this.state.imageUploadStatus ? (
-                  >
+                  <Spinner />
-                    {this.state.imageUploadStatus ? (
+                ) : (
-                      <Spinner />
+                  <Icon icon="image" classes="icon-inline" />
-                    ) : (
-                      <Icon icon="image" classes="icon-inline" />
-                    )}
-                  </label>
-                  <input
-                    id={`file-upload-${this.id}`}
-                    type="file"
-                    accept="image/*,video/*"
-                    name="file"
-                    className="d-none"
-                    multiple
-                    disabled={
-                      !UserService.Instance.myUserInfo || this.isDisabled
-                    }
-                    onChange={linkEvent(this, this.handleImageUpload)}
-                  />
-                </form>
-                {this.getFormatButton("header", this.handleInsertHeader)}
-                {this.getFormatButton(
-                  "strikethrough",
-                  this.handleInsertStrikethrough
                 )}
-                {this.getFormatButton("quote", this.handleInsertQuote)}
-                {this.getFormatButton("list", this.handleInsertList)}
-                {this.getFormatButton("code", this.handleInsertCode)}
-                {this.getFormatButton("subscript", this.handleInsertSubscript)}
-                {this.getFormatButton(
-                  "superscript",
-                  this.handleInsertSuperscript
-                )}
-                {this.getFormatButton("spoiler", this.handleInsertSpoiler)}
-                <a
-                  href={markdownHelpUrl}
-                  className="btn btn-sm text-muted fw-bold"
-                  title={I18NextService.i18n.t("formatting_help")}
-                  rel={relTags}
-                >
-                  <Icon icon="help-circle" classes="icon-inline" />
-                </a>
-              </div>
-
-              <div>
-                <textarea
-                  id={this.id}
-                  className={classNames(
-                    "form-control border-0 rounded-top-0 rounded-bottom",
-                    {
-                      "d-none": this.state.previewMode,
-                    }
-                  )}
-                  value={this.state.content}
-                  onInput={linkEvent(this, this.handleContentChange)}
-                  onPaste={linkEvent(this, this.handleImageUploadPaste)}
-                  onKeyDown={linkEvent(this, this.handleKeyBinds)}
-                  required
-                  disabled={this.isDisabled}
-                  rows={2}
-                  maxLength={
-                    this.props.maxLength ?? markdownFieldCharacterLimit
-                  }
-                  placeholder={this.props.placeholder}
-                />
-                {this.state.previewMode && this.state.content && (
-                  <div
-                    className="card border-secondary card-body md-div"
-                    dangerouslySetInnerHTML={mdToHtml(this.state.content)}
-                  />
-                )}
-                {this.state.imageUploadStatus &&
-                  this.state.imageUploadStatus.total > 1 && (
-                    <ProgressBar
-                      className="mt-2"
-                      striped
-                      animated
-                      value={this.state.imageUploadStatus.uploaded}
-                      max={this.state.imageUploadStatus.total}
-                      text={
-                        I18NextService.i18n.t("pictures_uploded_progess", {
-                          uploaded: this.state.imageUploadStatus.uploaded,
-                          total: this.state.imageUploadStatus.total,
-                        }) ?? undefined
-                      }
-                    />
-                  )}
-              </div>
-              <label className="visually-hidden" htmlFor={this.id}>
-                {I18NextService.i18n.t("body")}
               </label>
-            </div>
+              <input
+                id={`file-upload-${this.id}`}
+                type="file"
+                accept="image/*,video/*"
+                name="file"
+                className="d-none"
+                multiple
+                disabled={!UserService.Instance.myUserInfo || this.isDisabled}
+                onChange={linkEvent(this, this.handleImageUpload)}
+              />
+            </form>
+            {this.getFormatButton("header", this.handleInsertHeader)}
+            {this.getFormatButton(
+              "strikethrough",
+              this.handleInsertStrikethrough
+            )}
+            {this.getFormatButton("quote", this.handleInsertQuote)}
+            {this.getFormatButton("list", this.handleInsertList)}
+            {this.getFormatButton("code", this.handleInsertCode)}
+            {this.getFormatButton("subscript", this.handleInsertSubscript)}
+            {this.getFormatButton("superscript", this.handleInsertSuperscript)}
+            {this.getFormatButton("spoiler", this.handleInsertSpoiler)}
+            <a
+              href={markdownHelpUrl}
+              className="btn btn-sm text-muted fw-bold"
+              title={I18NextService.i18n.t("formatting_help")}
+              rel={relTags}
+            >
+              <Icon icon="help-circle" classes="icon-inline" />
+            </a>
           </div>
 
-          <div className="col-12 d-flex align-items-center flex-wrap mt-2">
+          <div>
-            {this.props.showLanguage && (
+            <textarea
-              <LanguageSelect
+              id={this.id}
-                iconVersion
+              className={classNames(
-                allLanguages={this.props.allLanguages}
+                "form-control border-0 rounded-top-0 rounded-bottom",
-                // Only set the selected language ID if it exists as an option
+                {
-                // in the dropdown; otherwise, set it to 0 (Undetermined)
+                  "d-none": this.state.previewMode,
-                selectedLanguageIds={
-                  languageId && this.props.siteLanguages.includes(languageId)
-                    ? [languageId]
-                    : [0]
                 }
-                siteLanguages={this.props.siteLanguages}
+              )}
-                onChange={this.handleLanguageChange}
+              value={this.state.content}
-                disabled={this.isDisabled}
+              onInput={linkEvent(this, this.handleContentChange)}
+              onPaste={linkEvent(this, this.handleImageUploadPaste)}
+              onKeyDown={linkEvent(this, this.handleKeyBinds)}
+              required
+              disabled={this.isDisabled}
+              rows={2}
+              maxLength={this.props.maxLength ?? markdownFieldCharacterLimit}
+              placeholder={this.props.placeholder}
+            />
+            {this.state.previewMode && this.state.content && (
+              <div
+                className="card border-secondary card-body md-div"
+                dangerouslySetInnerHTML={mdToHtml(this.state.content)}
               />
             )}
+            {this.state.imageUploadStatus &&
+              this.state.imageUploadStatus.total > 1 && (
+                <ProgressBar
+                  className="mt-2"
+                  striped
+                  animated
+                  value={this.state.imageUploadStatus.uploaded}
+                  max={this.state.imageUploadStatus.total}
+                  text={
+                    I18NextService.i18n.t("pictures_uploded_progess", {
+                      uploaded: this.state.imageUploadStatus.uploaded,
+                      total: this.state.imageUploadStatus.total,
+                    }) ?? undefined
+                  }
+                />
+              )}
+          </div>
+          <label className="visually-hidden" htmlFor={this.id}>
+            {I18NextService.i18n.t("body")}
+          </label>
+        </div>
 
-            {/* A flex expander */}
+        <div className="d-flex align-items-center flex-wrap mt-2">
-            <div className="flex-grow-1"></div>
+          {this.props.showLanguage && (
+            <LanguageSelect
+              iconVersion
+              allLanguages={this.props.allLanguages}
+              // Only set the selected language ID if it exists as an option
+              // in the dropdown; otherwise, set it to 0 (Undetermined)
+              selectedLanguageIds={
+                languageId && this.props.siteLanguages.includes(languageId)
+                  ? [languageId]
+                  : [0]
+              }
+              siteLanguages={this.props.siteLanguages}
+              onChange={this.handleLanguageChange}
+              disabled={this.isDisabled}
+            />
+          )}
 
-            {this.props.replyType && (
+          {/* A flex expander */}
-              <button
+          <div className="flex-grow-1"></div>
-                type="button"
+
-                className="btn btn-sm btn-secondary ms-2"
+          {this.props.replyType && (
-                onClick={linkEvent(this, this.handleReplyCancel)}
-              >
-                {I18NextService.i18n.t("cancel")}
-              </button>
-            )}
             <button
               type="button"
-              disabled={!this.state.content}
+              className="btn btn-sm btn-secondary ms-2"
-              className={classNames("btn btn-sm btn-secondary ms-2", {
+              onClick={linkEvent(this, this.handleReplyCancel)}
-                active: this.state.previewMode,
-              })}
-              onClick={linkEvent(this, this.handlePreviewToggle)}
             >
-              {this.state.previewMode
+              {I18NextService.i18n.t("cancel")}
-                ? I18NextService.i18n.t("edit")
-                : I18NextService.i18n.t("preview")}
             </button>
-            {this.props.buttonTitle && (
+          )}
-              <button
+          <button
-                type="submit"
+            type="button"
-                className="btn btn-sm btn-secondary ms-2"
+            disabled={!this.state.content}
-                disabled={this.isDisabled || !this.state.content}
+            className={classNames("btn btn-sm btn-secondary ms-2", {
-              >
+              active: this.state.previewMode,
-                {this.state.loading && <Spinner className="me-1" />}
+            })}
-                {this.props.buttonTitle}
+            onClick={linkEvent(this, this.handlePreviewToggle)}
-              </button>
+          >
-            )}
+            {this.state.previewMode
-          </div>
+              ? I18NextService.i18n.t("edit")
+              : I18NextService.i18n.t("preview")}
+          </button>
+          {this.props.buttonTitle && (
+            <button
+              type="submit"
+              className="btn btn-sm btn-secondary ms-2"
+              disabled={this.isDisabled || !this.state.content}
+            >
+              {this.state.loading && <Spinner className="me-1" />}
+              {this.props.buttonTitle}
+            </button>
+          )}
         </div>
       </form>
     );

src/shared/components/common/vote-buttons.tsx

@@ -174,7 +174,9 @@ export class VoteButtons extends Component<VoteButtonsProps, VoteButtonsState> {
 
   render() {
     return (
-      <div className={`vote-bar col-1 pe-0 small text-center`}>
+      <div
+        className={`vote-bar col-1 pe-0 small text-center d-flex flex-column justify-content-center`}
+      >
         <button
           type="button"
           className={`btn-animate btn btn-link p-0 ${

src/shared/components/community/communities.tsx

@@ -101,7 +101,7 @@ export class Communities extends Component<any, CommunitiesState> {
       case "success": {
         const { listingType, page } = this.getCommunitiesQueryParams();
         return (
-          <div>
+          <>
             <h1 className="h4">
               {I18NextService.i18n.t("list_of_communities")}
             </h1>
@@ -114,28 +114,28 @@ export class Communities extends Component<any, CommunitiesState> {
                   onChange={this.handleListingTypeChange}
                 />
               </div>
-              <div className="col-auto">{this.searchForm()}</div>
+              {this.searchForm()}
             </div>
 
             <div className="table-responsive">
               <table
                 id="community_table"
-                className="table table-sm table-hover"
+                className="table table-sm table-hover align-middle text-end"
               >
                 <thead className="pointer">
                   <tr>
-                    <th>{I18NextService.i18n.t("name")}</th>
+                    <th className="text-start">
-                    <th className="text-right">
+                      {I18NextService.i18n.t("name")}
-                      {I18NextService.i18n.t("subscribers")}
                     </th>
-                    <th className="text-right">
+                    <th>{I18NextService.i18n.t("subscribers")}</th>
+                    <th>
                       {I18NextService.i18n.t("users")} /{" "}
                       {I18NextService.i18n.t("month")}
                     </th>
-                    <th className="text-right d-none d-lg-table-cell">
+                    <th className="d-none d-lg-table-cell">
                       {I18NextService.i18n.t("posts")}
                     </th>
-                    <th className="text-right d-none d-lg-table-cell">
+                    <th className="d-none d-lg-table-cell">
                       {I18NextService.i18n.t("comments")}
                     </th>
                     <th></th>
@@ -145,56 +145,40 @@ export class Communities extends Component<any, CommunitiesState> {
                   {this.state.listCommunitiesResponse.data.communities.map(
                     cv => (
                       <tr key={cv.community.id}>
-                        <td>
+                        <td className="text-start">
                           <CommunityLink community={cv.community} />
                         </td>
-                        <td className="text-right">
+                        <td>{numToSI(cv.counts.subscribers)}</td>
-                          {numToSI(cv.counts.subscribers)}
+                        <td>{numToSI(cv.counts.users_active_month)}</td>
-                        </td>
+                        <td className="d-none d-lg-table-cell">
-                        <td className="text-right">
-                          {numToSI(cv.counts.users_active_month)}
-                        </td>
-                        <td className="text-right d-none d-lg-table-cell">
                           {numToSI(cv.counts.posts)}
                         </td>
-                        <td className="text-right d-none d-lg-table-cell">
+                        <td className="d-none d-lg-table-cell">
                           {numToSI(cv.counts.comments)}
                         </td>
-                        <td className="text-right">
+                        <td>
-                          {cv.subscribed == "Subscribed" && (
+                          {cv.subscribed === "Pending" ? (
-                            <button
-                              className="btn btn-link d-inline-block"
-                              onClick={linkEvent(
-                                {
-                                  i: this,
-                                  communityId: cv.community.id,
-                                  follow: false,
-                                },
-                                this.handleFollow
-                              )}
-                            >
-                              {I18NextService.i18n.t("unsubscribe")}
-                            </button>
-                          )}
-                          {cv.subscribed === "NotSubscribed" && (
-                            <button
-                              className="btn btn-link d-inline-block"
-                              onClick={linkEvent(
-                                {
-                                  i: this,
-                                  communityId: cv.community.id,
-                                  follow: true,
-                                },
-                                this.handleFollow
-                              )}
-                            >
-                              {I18NextService.i18n.t("subscribe")}
-                            </button>
-                          )}
-                          {cv.subscribed === "Pending" && (
                             <div className="text-warning d-inline-block">
                               {I18NextService.i18n.t("subscribe_pending")}
                             </div>
+                          ) : (
+                            <button
+                              className="btn btn-link d-inline-block"
+                              onClick={linkEvent(
+                                {
+                                  i: this,
+                                  communityId: cv.community.id,
+                                  follow: cv.subscribed !== "Subscribed",
+                                },
+                                this.handleFollow
+                              )}
+                            >
+                              {I18NextService.i18n.t(
+                                `${
+                                  cv.subscribed === "NotSubscribed" ? "un" : ""
+                                }subscribe`
+                              )}
+                            </button>
                           )}
                         </td>
                       </tr>
@@ -204,7 +188,7 @@ export class Communities extends Component<any, CommunitiesState> {
               </table>
             </div>
             <Paginator page={page} onChange={this.handlePageChange} />
-          </div>
+          </>
         );
       }
     }
@@ -212,42 +196,38 @@ export class Communities extends Component<any, CommunitiesState> {
 
   render() {
     return (
-      <div className="communities container-lg">
+      <main className="communities container-lg mx-1 mx-md-auto">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
         />
         {this.renderListings()}
-      </div>
+      </main>
     );
   }
 
   searchForm() {
     return (
       <form
-        className="row mb-2"
+        className="d-flex mb-2 col-auto flex-nowrap"
         onSubmit={linkEvent(this, this.handleSearchSubmit)}
       >
-        <div className="col-auto">
+        <label className="visually-hidden" htmlFor="communities-search">
-          <input
+          {I18NextService.i18n.t("search")}
-            type="text"
+        </label>
-            id="communities-search"
+        <input
-            className="form-control"
+          type="text"
-            value={this.state.searchText}
+          id="communities-search"
-            placeholder={`${I18NextService.i18n.t("search")}...`}
+          className="form-control me-1"
-            onInput={linkEvent(this, this.handleSearchChange)}
+          value={this.state.searchText}
-            required
+          placeholder={`${I18NextService.i18n.t("search")}...`}
-            minLength={3}
+          onInput={linkEvent(this, this.handleSearchChange)}
-          />
+          required
-        </div>
+          minLength={3}
-        <div className="col-auto">
+        />
-          <label className="visually-hidden" htmlFor="communities-search">
+        <button type="submit" className="btn btn-secondary">
-            {I18NextService.i18n.t("search")}
+          {I18NextService.i18n.t("search")}
-          </label>
+        </button>
-          <button type="submit" className="btn btn-secondary">
-            <span>{I18NextService.i18n.t("search")}</span>
-          </button>
-        </div>
       </form>
     );
   }

src/shared/components/community/community-form.tsx

@@ -200,41 +200,36 @@ export class CommunityForm extends Component<
         </div>
 
         {this.props.enableNsfw && (
-          <div className="mb-3 row">
+          <div className="form-check mb-3">
-            <legend className="col-form-label col-sm-2 pt-0">
+            <label className="form-check-label pt-0" htmlFor="community-nsfw">
               {I18NextService.i18n.t("nsfw")}
-            </legend>
+            </label>
-            <div className="col-10">
+            <input
-              <div className="form-check">
+              className="form-check-input"
-                <input
+              id="community-nsfw"
-                  className="form-check-input position-static"
+              type="checkbox"
-                  id="community-nsfw"
+              checked={this.state.form.nsfw}
-                  type="checkbox"
+              onChange={linkEvent(this, this.handleCommunityNsfwChange)}
-                  checked={this.state.form.nsfw}
+            />
-                  onChange={linkEvent(this, this.handleCommunityNsfwChange)}
-                />
-              </div>
-            </div>
           </div>
         )}
-        <div className="mb-3 row">
+        <div className="form-check mb-3">
-          <legend className="col-form-label col-6 pt-0">
+          <label
+            className="form-check-label pt-0"
+            htmlFor="community-only-mods-can-post"
+          >
             {I18NextService.i18n.t("only_mods_can_post_in_community")}
-          </legend>
+          </label>
-          <div className="col-6">
+          <input
-            <div className="form-check">
+            className="form-check-input"
-              <input
+            id="community-only-mods-can-post"
-                className="form-check-input position-static"
+            type="checkbox"
-                id="community-only-mods-can-post"
+            checked={this.state.form.posting_restricted_to_mods}
-                type="checkbox"
+            onChange={linkEvent(
-                checked={this.state.form.posting_restricted_to_mods}
+              this,
-                onChange={linkEvent(
+              this.handleCommunityPostingRestrictedToMods
-                  this,
+            )}
-                  this.handleCommunityPostingRestrictedToMods
+          />
-                )}
-              />
-            </div>
-          </div>
         </div>
         <LanguageSelect
           allLanguages={this.props.allLanguages}

src/shared/components/community/community.tsx

@@ -316,33 +316,31 @@ export class Community extends Component<
               image={res.community_view.community.icon}
             />
 
-            <div className="row">
+            <main className="col-12 col-md-8 col-lg-9">
-              <div className="col-12 col-md-8">
+              {this.communityInfo(res)}
-                {this.communityInfo(res)}
+              <div className="d-block d-md-none">
-                <div className="d-block d-md-none">
+                <button
-                  <button
+                  className="btn btn-secondary d-inline-block mb-2 me-3"
-                    className="btn btn-secondary d-inline-block mb-2 me-3"
+                  onClick={linkEvent(this, this.handleShowSidebarMobile)}
-                    onClick={linkEvent(this, this.handleShowSidebarMobile)}
+                >
-                  >
+                  {I18NextService.i18n.t("sidebar")}{" "}
-                    {I18NextService.i18n.t("sidebar")}{" "}
+                  <Icon
-                    <Icon
+                    icon={
-                      icon={
+                      this.state.showSidebarMobile
-                        this.state.showSidebarMobile
+                        ? `minus-square`
-                          ? `minus-square`
+                        : `plus-square`
-                          : `plus-square`
+                    }
-                      }
+                    classes="icon-inline"
-                      classes="icon-inline"
+                  />
-                    />
+                </button>
-                  </button>
+                {this.state.showSidebarMobile && this.sidebar(res)}
-                  {this.state.showSidebarMobile && this.sidebar(res)}
-                </div>
-                {this.selects(res)}
-                {this.listings(res)}
-                <Paginator page={page} onChange={this.handlePageChange} />
-              </div>
-              <div className="d-none d-md-block col-md-4">
-                {this.sidebar(res)}
               </div>
+              {this.selects(res)}
+              {this.listings(res)}
+              <Paginator page={page} onChange={this.handlePageChange} />
+            </main>
+            <div className="d-none d-md-block col-md-4 col-lg-3">
+              {this.sidebar(res)}
             </div>
           </>
         );
@@ -352,7 +350,9 @@ export class Community extends Component<
 
   render() {
     return (
-      <div className="community container-lg">{this.renderCommunity()}</div>
+      <div className="community container-lg mx-1 mx-md-auto row">
+        {this.renderCommunity()}
+      </div>
     );
   }
 

src/shared/components/community/create-community.tsx

@@ -32,25 +32,23 @@ export class CreateCommunity extends Component<any, CreateCommunityState> {
 
   render() {
     return (
-      <div className="create-community container-lg">
+      <main className="create-community container-lg row mx-1 mx-md-auto">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
         />
-        <div className="row">
+        <div className="col-12 col-lg-6 offset-lg-3 mb-4">
-          <div className="col-12 col-lg-6 offset-lg-3 mb-4">
+          <h5>{I18NextService.i18n.t("create_community")}</h5>
-            <h5>{I18NextService.i18n.t("create_community")}</h5>
+          <CommunityForm
-            <CommunityForm
+            onUpsertCommunity={this.handleCommunityCreate}
-              onUpsertCommunity={this.handleCommunityCreate}
+            enableNsfw={enableNsfw(this.state.siteRes)}
-              enableNsfw={enableNsfw(this.state.siteRes)}
+            allLanguages={this.state.siteRes.all_languages}
-              allLanguages={this.state.siteRes.all_languages}
+            siteLanguages={this.state.siteRes.discussion_languages}
-              siteLanguages={this.state.siteRes.discussion_languages}
+            communityLanguages={this.state.siteRes.discussion_languages}
-              communityLanguages={this.state.siteRes.discussion_languages}
+            loading={this.state.loading}
-              loading={this.state.loading}
+          />
-            />
-          </div>
         </div>
-      </div>
+      </main>
     );
   }
 

src/shared/components/community/sidebar.tsx

@@ -103,7 +103,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
 
   render() {
     return (
-      <div className="community-sidebar">
+      <aside className="community-sidebar">
         {!this.state.showEdit ? (
           this.sidebar()
         ) : (
@@ -117,7 +117,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
             enableNsfw={this.props.enableNsfw}
           />
         )}
-      </div>
+      </aside>
     );
   }
 
@@ -125,42 +125,40 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     const myUSerInfo = UserService.Instance.myUserInfo;
     const { name, actor_id } = this.props.community_view.community;
     return (
-      <aside className="mb-3">
+      <div id="sidebarContainer" className="mb-3">
-        <div id="sidebarContainer">
+        <section id="sidebarMain" className="card border-secondary mb-3">
-          <section id="sidebarMain" className="card border-secondary mb-3">
+          <div className="card-body">
-            <div className="card-body">
+            {this.communityTitle()}
-              {this.communityTitle()}
+            {this.props.editable && this.adminButtons()}
-              {this.props.editable && this.adminButtons()}
+            {myUSerInfo && this.subscribe()}
-              {myUSerInfo && this.subscribe()}
+            {this.canPost && this.createPost()}
-              {this.canPost && this.createPost()}
+            {myUSerInfo && this.blockCommunity()}
-              {myUSerInfo && this.blockCommunity()}
+            {!myUSerInfo && (
-              {!myUSerInfo && (
+              <div className="alert alert-info" role="alert">
-                <div className="alert alert-info" role="alert">
+                <T
-                  <T
+                  i18nKey="community_not_logged_in_alert"
-                    i18nKey="community_not_logged_in_alert"
+                  interpolation={{
-                    interpolation={{
+                    community: name,
-                      community: name,
+                    instance: hostname(actor_id),
-                      instance: hostname(actor_id),
+                  }}
-                    }}
+                >
-                  >
+                  #<code className="user-select-all">#</code>#
-                    #<code className="user-select-all">#</code>#
+                </T>
-                  </T>
+              </div>
-                </div>
+            )}
-              )}
+          </div>
-            </div>
+        </section>
-          </section>
+        <section id="sidebarInfo" className="card border-secondary mb-3">
-          <section id="sidebarInfo" className="card border-secondary mb-3">
+          <div className="card-body">
-            <div className="card-body">
+            {this.description()}
-              {this.description()}
+            <Badges
-              <Badges
+              communityId={this.props.community_view.community.id}
-                communityId={this.props.community_view.community.id}
+              counts={this.props.community_view.counts}
-                counts={this.props.community_view.counts}
+            />
-              />
+            {this.mods()}
-              {this.mods()}
+          </div>
-            </div>
+        </section>
-          </section>
+      </div>
-        </div>
-      </aside>
     );
   }
 

src/shared/components/home/admin-settings.tsx

@@ -117,7 +117,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
         : undefined;
 
     return (
-      <div className="admin-settings container-lg">
+      <main className="admin-settings container-lg row mx-1 mx-md-auto">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
@@ -220,7 +220,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
             },
           ]}
         />
-      </div>
+      </main>
     );
   }
 

src/shared/components/home/home.tsx

@@ -380,27 +380,30 @@ export class Home extends Component<any, HomeState> {
     } = this.state;
 
     return (
-      <div className="home container-lg">
+      <div className="home container-lg row mx-1 mx-md-auto">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
         />
         {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"
                   dangerouslySetInnerHTML={mdToHtml(tagline)}
                 ></div>
               )}
-              <div className="d-block d-md-none">{this.mobileView}</div>
+              <div className="d-block d-md-none row">{this.mobileView}</div>
               {this.posts}
             </main>
-            <aside className="d-none d-md-block col-md-4">
+            <aside
+              id="sidebarContainer"
+              className="d-none d-md-block col-md-4 col-lg-3"
+            >
               {this.mySidebar}
             </aside>
-          </div>
+          </>
         )}
       </div>
     );
@@ -423,45 +426,43 @@ export class Home extends Component<any, HomeState> {
     } = this.state;
 
     return (
-      <div className="row">
+      <div className="col-12">
-        <div className="col-12">
+        {this.hasFollows && (
-          {this.hasFollows && (
-            <MobileButton
-              textKey="subscribed"
-              show={showSubscribedMobile}
-              onClick={linkEvent(this, this.handleShowSubscribedMobile)}
-            />
-          )}
           <MobileButton
-            textKey="trending"
+            textKey="subscribed"
-            show={showTrendingMobile}
+            show={showSubscribedMobile}
-            onClick={linkEvent(this, this.handleShowTrendingMobile)}
+            onClick={linkEvent(this, this.handleShowSubscribedMobile)}
           />
-          <MobileButton
+        )}
-            textKey="sidebar"
+        <MobileButton
-            show={showSidebarMobile}
+          textKey="trending"
-            onClick={linkEvent(this, this.handleShowSidebarMobile)}
+          show={showTrendingMobile}
+          onClick={linkEvent(this, this.handleShowTrendingMobile)}
+        />
+        <MobileButton
+          textKey="sidebar"
+          show={showSidebarMobile}
+          onClick={linkEvent(this, this.handleShowSidebarMobile)}
+        />
+        {showSidebarMobile && (
+          <SiteSidebar
+            site={site}
+            admins={admins}
+            counts={counts}
+            showLocal={showLocal(this.isoData)}
+            isMobile={true}
           />
-          {showSidebarMobile && (
+        )}
-            <SiteSidebar
+        {showTrendingMobile && (
-              site={site}
+          <div className="card border-secondary mb-3">
-              admins={admins}
+            {this.trendingCommunities()}
-              counts={counts}
+          </div>
-              showLocal={showLocal(this.isoData)}
+        )}
-              isMobile={true}
+        {showSubscribedMobile && (
-            />
+          <div className="card border-secondary mb-3">
-          )}
+            {this.subscribedCommunities(true)}
-          {showTrendingMobile && (
+          </div>
-            <div className="card border-secondary mb-3">
+        )}
-              {this.trendingCommunities()}
-            </div>
-          )}
-          {showSubscribedMobile && (
-            <div className="card border-secondary mb-3">
-              {this.subscribedCommunities(true)}
-            </div>
-          )}
-        </div>
       </div>
     );
   }
@@ -475,7 +476,7 @@ export class Home extends Component<any, HomeState> {
     } = this.state;
 
     return (
-      <div id="sidebarContainer">
+      <>
         <section id="sidebarMain" className="card border-secondary mb-3">
           {this.trendingCommunities()}
         </section>
@@ -495,7 +496,7 @@ export class Home extends Component<any, HomeState> {
             </section>
           </div>
         )}
-      </div>
+      </>
     );
   }
 
@@ -646,11 +647,9 @@ export class Home extends Component<any, HomeState> {
 
     return (
       <div className="main-content-wrapper">
-        <div>
+        {this.selects}
-          {this.selects}
+        {this.listings}
-          {this.listings}
+        <Paginator page={page} onChange={this.handlePageChange} />
-          <Paginator page={page} onChange={this.handlePageChange} />
-        </div>
       </div>
     );
   }

src/shared/components/home/instances.tsx

@@ -85,24 +85,24 @@ export class Instances extends Component<any, InstancesState> {
       case "success": {
         const instances = this.state.instancesRes.data.federated_instances;
         return instances ? (
-          <div className="row">
+          <>
-            <div className="col-md-6">
+            <div className="col-md-6 col-xl-4">
               <h5>{I18NextService.i18n.t("linked_instances")}</h5>
               {this.itemList(instances.linked)}
             </div>
             {instances.allowed && instances.allowed.length > 0 && (
-              <div className="col-md-6">
+              <div className="col-md-6 col-xl-4">
                 <h5>{I18NextService.i18n.t("allowed_instances")}</h5>
                 {this.itemList(instances.allowed)}
               </div>
             )}
             {instances.blocked && instances.blocked.length > 0 && (
-              <div className="col-md-6">
+              <div className="col-md-6 col-xl-4">
                 <h5>{I18NextService.i18n.t("blocked_instances")}</h5>
                 {this.itemList(instances.blocked)}
               </div>
             )}
-          </div>
+          </>
         ) : (
           <></>
         );
@@ -112,13 +112,13 @@ export class Instances extends Component<any, InstancesState> {
 
   render() {
     return (
-      <div className="home-instances container-lg">
+      <main className="home-instances container-lg row mx-1 mx-md-auto">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
         />
         {this.renderInstances()}
-      </div>
+      </main>
     );
   }
 

src/shared/components/home/legal.tsx

@@ -26,7 +26,7 @@ export class Legal extends Component<any, LegalState> {
   render() {
     const legal = this.state.siteRes.site_view.local_site.legal_information;
     return (
-      <div className="legal container-lg">
+      <main className="legal container-lg mx-1 mx-md-auto">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
@@ -34,7 +34,7 @@ export class Legal extends Component<any, LegalState> {
         {legal && (
           <div className="md-div" dangerouslySetInnerHTML={mdToHtml(legal)} />
         )}
-      </div>
+      </main>
     );
   }
 }

src/shared/components/home/login.tsx

@@ -53,107 +53,103 @@ export class Login extends Component<any, State> {
 
   render() {
     return (
-      <div className="login container-lg">
+      <main className="login container-lg row mx-1 mx-md-auto">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
         />
-        <div className="row">
+        <div className="col-12 col-lg-6 offset-lg-3">{this.loginForm()}</div>
-          <div className="col-12 col-lg-6 offset-lg-3">{this.loginForm()}</div>
+      </main>
-        </div>
-      </div>
     );
   }
 
   loginForm() {
     return (
-      <div>
+      <form onSubmit={linkEvent(this, this.handleLoginSubmit)}>
-        <form onSubmit={linkEvent(this, this.handleLoginSubmit)}>
+        <h5>{I18NextService.i18n.t("login")}</h5>
-          <h5>{I18NextService.i18n.t("login")}</h5>
+        <div className="mb-3 row">
+          <label
+            className="col-sm-2 col-form-label"
+            htmlFor="login-email-or-username"
+          >
+            {I18NextService.i18n.t("email_or_username")}
+          </label>
+          <div className="col-sm-10">
+            <input
+              type="text"
+              className="form-control"
+              id="login-email-or-username"
+              value={this.state.form.username_or_email}
+              onInput={linkEvent(this, this.handleLoginUsernameChange)}
+              autoComplete="email"
+              required
+              minLength={3}
+            />
+          </div>
+        </div>
+        <div className="mb-3 row">
+          <label className="col-sm-2 col-form-label" htmlFor="login-password">
+            {I18NextService.i18n.t("password")}
+          </label>
+          <div className="col-sm-10">
+            <input
+              type="password"
+              id="login-password"
+              value={this.state.form.password}
+              onInput={linkEvent(this, this.handleLoginPasswordChange)}
+              className="form-control"
+              autoComplete="current-password"
+              required
+              maxLength={60}
+            />
+            <button
+              type="button"
+              onClick={linkEvent(this, this.handlePasswordReset)}
+              className="btn p-0 btn-link d-inline-block float-right text-muted small fw-bold pointer-events not-allowed"
+              disabled={
+                !!this.state.form.username_or_email &&
+                !validEmail(this.state.form.username_or_email)
+              }
+              title={I18NextService.i18n.t("no_password_reset")}
+            >
+              {I18NextService.i18n.t("forgot_password")}
+            </button>
+          </div>
+        </div>
+        {this.state.showTotp && (
           <div className="mb-3 row">
             <label
-              className="col-sm-2 col-form-label"
+              className="col-sm-6 col-form-label"
-              htmlFor="login-email-or-username"
+              htmlFor="login-totp-token"
             >
-              {I18NextService.i18n.t("email_or_username")}
+              {I18NextService.i18n.t("two_factor_token")}
             </label>
-            <div className="col-sm-10">
+            <div className="col-sm-6">
               <input
-                type="text"
+                type="number"
+                inputMode="numeric"
                 className="form-control"
-                id="login-email-or-username"
+                id="login-totp-token"
-                value={this.state.form.username_or_email}
+                pattern="[0-9]*"
-                onInput={linkEvent(this, this.handleLoginUsernameChange)}
+                autoComplete="one-time-code"
-                autoComplete="email"
+                value={this.state.form.totp_2fa_token}
-                required
+                onInput={linkEvent(this, this.handleLoginTotpChange)}
-                minLength={3}
               />
             </div>
           </div>
-          <div className="mb-3 row">
+        )}
-            <label className="col-sm-2 col-form-label" htmlFor="login-password">
+        <div className="mb-3 row">
-              {I18NextService.i18n.t("password")}
+          <div className="col-sm-10">
-            </label>
+            <button type="submit" className="btn btn-secondary">
-            <div className="col-sm-10">
+              {this.state.loginRes.state == "loading" ? (
-              <input
+                <Spinner />
-                type="password"
+              ) : (
-                id="login-password"
+                I18NextService.i18n.t("login")
-                value={this.state.form.password}
+              )}
-                onInput={linkEvent(this, this.handleLoginPasswordChange)}
+            </button>
-                className="form-control"
-                autoComplete="current-password"
-                required
-                maxLength={60}
-              />
-              <button
-                type="button"
-                onClick={linkEvent(this, this.handlePasswordReset)}
-                className="btn p-0 btn-link d-inline-block float-right text-muted small fw-bold pointer-events not-allowed"
-                disabled={
-                  !!this.state.form.username_or_email &&
-                  !validEmail(this.state.form.username_or_email)
-                }
-                title={I18NextService.i18n.t("no_password_reset")}
-              >
-                {I18NextService.i18n.t("forgot_password")}
-              </button>
-            </div>
           </div>
-          {this.state.showTotp && (
+        </div>
-            <div className="mb-3 row">
+      </form>
-              <label
-                className="col-sm-6 col-form-label"
-                htmlFor="login-totp-token"
-              >
-                {I18NextService.i18n.t("two_factor_token")}
-              </label>
-              <div className="col-sm-6">
-                <input
-                  type="number"
-                  inputMode="numeric"
-                  className="form-control"
-                  id="login-totp-token"
-                  pattern="[0-9]*"
-                  autoComplete="one-time-code"
-                  value={this.state.form.totp_2fa_token}
-                  onInput={linkEvent(this, this.handleLoginTotpChange)}
-                />
-              </div>
-            </div>
-          )}
-          <div className="mb-3 row">
-            <div className="col-sm-10">
-              <button type="submit" className="btn btn-secondary">
-                {this.state.loginRes.state == "loading" ? (
-                  <Spinner />
-                ) : (
-                  I18NextService.i18n.t("login")
-                )}
-              </button>
-            </div>
-          </div>
-        </form>
-      </div>
     );
   }
 

src/shared/components/home/setup.tsx

@@ -59,25 +59,23 @@ export class Setup extends Component<any, State> {
 
   render() {
     return (
-      <div className="home-setup container-lg">
+      <main className="home-setup container-lg row mx-1 mx-md-auto">
         <Helmet title={this.documentTitle} />
-        <div className="row">
+        <div className="col-12 offset-lg-3 col-lg-6">
-          <div className="col-12 offset-lg-3 col-lg-6">
+          <h3>{I18NextService.i18n.t("lemmy_instance_setup")}</h3>
-            <h3>{I18NextService.i18n.t("lemmy_instance_setup")}</h3>
+          {!this.state.doneRegisteringUser ? (
-            {!this.state.doneRegisteringUser ? (
+            this.registerUser()
-              this.registerUser()
+          ) : (
-            ) : (
+            <SiteForm
-              <SiteForm
+              showLocal
-                showLocal
+              onSaveSite={this.handleCreateSite}
-                onSaveSite={this.handleCreateSite}
+              siteRes={this.state.siteRes}
-                siteRes={this.state.siteRes}
+              themeList={this.state.themeList}
-                themeList={this.state.themeList}
+              loading={false}
-                loading={false}
+            />
-              />
+          )}
-            )}
-          </div>
         </div>
-      </div>
+      </main>
     );
   }
 

src/shared/components/home/signup.tsx

@@ -123,17 +123,13 @@ export class Signup extends Component<any, State> {
 
   render() {
     return (
-      <div className="home-signup container-lg">
+      <main className="home-signup container-lg row mx-1 mx-md-auto">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
         />
-        <div className="row">
+        <div className="col-12 col-lg-6 offset-lg-3">{this.registerForm()}</div>
-          <div className="col-12 col-lg-6 offset-lg-3">
+      </main>
-            {this.registerForm()}
-          </div>
-        </div>
-      </div>
     );
   }
 

src/shared/components/modlog.tsx

@@ -583,7 +583,7 @@ const Filter = ({
   options: Choice[];
   loading: boolean;
 }) => (
-  <div className="col-sm-6 mb-3">
+  <div className="col-sm-6 col-xl-4 col-xxl-3 mb-3">
     <label className="mb-2" htmlFor={`filter-${filterType}`}>
       {I18NextService.i18n.t(`filter_by_${filterType}` as NoOptionI18nKeys)}
     </label>
@@ -745,94 +745,88 @@ export class Modlog extends Component<
     const { actionType, modId, userId } = getModlogQueryParams();
 
     return (
-      <div className="modlog container-lg">
+      <main className="modlog container-lg row mx-1 mx-md-auto">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
         />
 
-        <div>
+        <div
-          <div
+          className="alert alert-warning text-sm-start text-xs-center"
-            className="alert alert-warning text-sm-start text-xs-center"
+          role="alert"
-            role="alert"
+        >
-          >
+          <Icon
-            <Icon
+            icon="alert-triangle"
-              icon="alert-triangle"
+            inline
-              inline
+            classes="me-sm-2 mx-auto d-sm-inline d-block"
-              classes="me-sm-2 mx-auto d-sm-inline d-block"
+          />
-            />
+          <T i18nKey="modlog_content_warning" class="d-inline">
-            <T i18nKey="modlog_content_warning" class="d-inline">
+            #<strong>#</strong>#
-              #<strong>#</strong>#
+          </T>
-            </T>
-          </div>
-          {this.state.communityRes.state === "success" && (
-            <h5>
-              <Link
-                className="text-body"
-                to={`/c/${this.state.communityRes.data.community_view.community.name}`}
-              >
-                /c/{this.state.communityRes.data.community_view.community.name}{" "}
-              </Link>
-              <span>{I18NextService.i18n.t("modlog")}</span>
-            </h5>
-          )}
-          <div className="row mb-2">
-            <div className="col-sm-6">
-              <select
-                value={actionType}
-                onChange={linkEvent(this, this.handleFilterActionChange)}
-                className="form-select"
-                aria-label="action"
-              >
-                <option disabled aria-hidden="true">
-                  {I18NextService.i18n.t("filter_by_action")}
-                </option>
-                <option value={"All"}>{I18NextService.i18n.t("all")}</option>
-                <option value={"ModRemovePost"}>Removing Posts</option>
-                <option value={"ModLockPost"}>Locking Posts</option>
-                <option value={"ModFeaturePost"}>Featuring Posts</option>
-                <option value={"ModRemoveComment"}>Removing Comments</option>
-                <option value={"ModRemoveCommunity"}>
-                  Removing Communities
-                </option>
-                <option value={"ModBanFromCommunity"}>
-                  Banning From Communities
-                </option>
-                <option value={"ModAddCommunity"}>
-                  Adding Mod to Community
-                </option>
-                <option value={"ModTransferCommunity"}>
-                  Transferring Communities
-                </option>
-                <option value={"ModAdd"}>Adding Mod to Site</option>
-                <option value={"ModBan"}>Banning From Site</option>
-              </select>
-            </div>
-          </div>
-          <div className="row mb-2">
-            <Filter
-              filterType="user"
-              onChange={this.handleUserChange}
-              onSearch={this.handleSearchUsers}
-              value={userId}
-              options={userSearchOptions}
-              loading={loadingUserSearch}
-            />
-            {!this.isoData.site_res.site_view.local_site
-              .hide_modlog_mod_names && (
-              <Filter
-                filterType="mod"
-                onChange={this.handleModChange}
-                onSearch={this.handleSearchMods}
-                value={modId}
-                options={modSearchOptions}
-                loading={loadingModSearch}
-              />
-            )}
-          </div>
-          {this.renderModlogTable()}
         </div>
-      </div>
+        {this.state.communityRes.state === "success" && (
+          <h5>
+            <Link
+              className="text-body"
+              to={`/c/${this.state.communityRes.data.community_view.community.name}`}
+            >
+              /c/{this.state.communityRes.data.community_view.community.name}{" "}
+            </Link>
+            <span>{I18NextService.i18n.t("modlog")}</span>
+          </h5>
+        )}
+        <div className="row mb-2">
+          <div className="col-sm-6 col-xl-4 col-xxl-3">
+            <select
+              value={actionType}
+              onChange={linkEvent(this, this.handleFilterActionChange)}
+              className="form-select"
+              aria-label="action"
+            >
+              <option disabled aria-hidden="true">
+                {I18NextService.i18n.t("filter_by_action")}
+              </option>
+              <option value={"All"}>{I18NextService.i18n.t("all")}</option>
+              <option value={"ModRemovePost"}>Removing Posts</option>
+              <option value={"ModLockPost"}>Locking Posts</option>
+              <option value={"ModFeaturePost"}>Featuring Posts</option>
+              <option value={"ModRemoveComment"}>Removing Comments</option>
+              <option value={"ModRemoveCommunity"}>Removing Communities</option>
+              <option value={"ModBanFromCommunity"}>
+                Banning From Communities
+              </option>
+              <option value={"ModAddCommunity"}>Adding Mod to Community</option>
+              <option value={"ModTransferCommunity"}>
+                Transferring Communities
+              </option>
+              <option value={"ModAdd"}>Adding Mod to Site</option>
+              <option value={"ModBan"}>Banning From Site</option>
+            </select>
+          </div>
+        </div>
+        <div className="row mb-2">
+          <Filter
+            filterType="user"
+            onChange={this.handleUserChange}
+            onSearch={this.handleSearchUsers}
+            value={userId}
+            options={userSearchOptions}
+            loading={loadingUserSearch}
+          />
+          {!this.isoData.site_res.site_view.local_site
+            .hide_modlog_mod_names && (
+            <Filter
+              filterType="mod"
+              onChange={this.handleModChange}
+              onSearch={this.handleSearchMods}
+              value={modId}
+              options={modSearchOptions}
+              loading={loadingModSearch}
+            />
+          )}
+        </div>
+        {this.renderModlogTable()}
+      </main>
     );
   }
 

src/shared/components/person/inbox.tsx

@@ -213,49 +213,44 @@ export class Inbox extends Component<any, InboxState> {
     const auth = myAuth();
     const inboxRss = auth ? `/feeds/inbox/${auth}.xml` : undefined;
     return (
-      <div className="inbox container-lg">
+      <main className="inbox container-lg row mx-1 mx-md-auto">
-        <div className="row">
+        <div className="col-12">
-          <div className="col-12">
+          <HtmlTags
-            <HtmlTags
+            title={this.documentTitle}
-              title={this.documentTitle}
+            path={this.context.router.route.match.url}
-              path={this.context.router.route.match.url}
+          />
-            />
+          <h5 className="mb-2">
-            <h5 className="mb-2">
+            {I18NextService.i18n.t("inbox")}
-              {I18NextService.i18n.t("inbox")}
+            {inboxRss && (
-              {inboxRss && (
+              <small>
-                <small>
+                <a href={inboxRss} title="RSS" rel={relTags}>
-                  <a href={inboxRss} title="RSS" rel={relTags}>
+                  <Icon icon="rss" classes="ms-2 text-muted small" />
-                    <Icon icon="rss" classes="ms-2 text-muted small" />
+                </a>
-                  </a>
+                <link
-                  <link
+                  rel="alternate"
-                    rel="alternate"
+                  type="application/atom+xml"
-                    type="application/atom+xml"
+                  href={inboxRss}
-                    href={inboxRss}
+                />
-                  />
+              </small>
-                </small>
-              )}
-            </h5>
-            {this.hasUnreads && (
-              <button
-                className="btn btn-secondary mb-2"
-                onClick={linkEvent(this, this.handleMarkAllAsRead)}
-              >
-                {this.state.markAllAsReadRes.state == "loading" ? (
-                  <Spinner />
-                ) : (
-                  I18NextService.i18n.t("mark_all_as_read")
-                )}
-              </button>
             )}
-            {this.selects()}
+          </h5>
-            {this.section}
+          {this.hasUnreads && (
-            <Paginator
+            <button
-              page={this.state.page}
+              className="btn btn-secondary mb-2"
-              onChange={this.handlePageChange}
+              onClick={linkEvent(this, this.handleMarkAllAsRead)}
-            />
+            >
-          </div>
+              {this.state.markAllAsReadRes.state === "loading" ? (
+                <Spinner />
+              ) : (
+                I18NextService.i18n.t("mark_all_as_read")
+              )}
+            </button>
+          )}
+          {this.selects()}
+          {this.section}
+          <Paginator page={this.state.page} onChange={this.handlePageChange} />
         </div>
-      </div>
+      </main>
     );
   }
 
@@ -533,9 +528,9 @@ export class Inbox extends Component<any, InboxState> {
 
   all() {
     if (
-      this.state.repliesRes.state == "loading" ||
+      this.state.repliesRes.state === "loading" ||
-      this.state.mentionsRes.state == "loading" ||
+      this.state.mentionsRes.state === "loading" ||
-      this.state.messagesRes.state == "loading"
+      this.state.messagesRes.state === "loading"
     ) {
       return (
         <h5>
@@ -543,9 +538,7 @@ export class Inbox extends Component<any, InboxState> {
         </h5>
       );
     } else {
-      return (
+      return <>{this.buildCombined().map(r => this.renderReplyType(r))}</>;
-        <div>{this.buildCombined().map(r => this.renderReplyType(r))}</div>
-      );
     }
   }
 
@@ -560,37 +553,35 @@ export class Inbox extends Component<any, InboxState> {
       case "success": {
         const replies = this.state.repliesRes.data.replies;
         return (
-          <div>
+          <CommentNodes
-            <CommentNodes
+            nodes={commentsToFlatNodes(replies)}
-              nodes={commentsToFlatNodes(replies)}
+            viewType={CommentViewType.Flat}
-              viewType={CommentViewType.Flat}
+            finished={this.state.finished}
-              finished={this.state.finished}
+            markable
-              markable
+            showCommunity
-              showCommunity
+            showContext
-              showContext
+            enableDownvotes={enableDownvotes(this.state.siteRes)}
-              enableDownvotes={enableDownvotes(this.state.siteRes)}
+            allLanguages={this.state.siteRes.all_languages}
-              allLanguages={this.state.siteRes.all_languages}
+            siteLanguages={this.state.siteRes.discussion_languages}
-              siteLanguages={this.state.siteRes.discussion_languages}
+            onSaveComment={this.handleSaveComment}
-              onSaveComment={this.handleSaveComment}
+            onBlockPerson={this.handleBlockPerson}
-              onBlockPerson={this.handleBlockPerson}
+            onDeleteComment={this.handleDeleteComment}
-              onDeleteComment={this.handleDeleteComment}
+            onRemoveComment={this.handleRemoveComment}
-              onRemoveComment={this.handleRemoveComment}
+            onCommentVote={this.handleCommentVote}
-              onCommentVote={this.handleCommentVote}
+            onCommentReport={this.handleCommentReport}
-              onCommentReport={this.handleCommentReport}
+            onDistinguishComment={this.handleDistinguishComment}
-              onDistinguishComment={this.handleDistinguishComment}
+            onAddModToCommunity={this.handleAddModToCommunity}
-              onAddModToCommunity={this.handleAddModToCommunity}
+            onAddAdmin={this.handleAddAdmin}
-              onAddAdmin={this.handleAddAdmin}
+            onTransferCommunity={this.handleTransferCommunity}
-              onTransferCommunity={this.handleTransferCommunity}
+            onPurgeComment={this.handlePurgeComment}
-              onPurgeComment={this.handlePurgeComment}
+            onPurgePerson={this.handlePurgePerson}
-              onPurgePerson={this.handlePurgePerson}
+            onCommentReplyRead={this.handleCommentReplyRead}
-              onCommentReplyRead={this.handleCommentReplyRead}
+            onPersonMentionRead={this.handlePersonMentionRead}
-              onPersonMentionRead={this.handlePersonMentionRead}
+            onBanPersonFromCommunity={this.handleBanFromCommunity}
-              onBanPersonFromCommunity={this.handleBanFromCommunity}
+            onBanPerson={this.handleBanPerson}
-              onBanPerson={this.handleBanPerson}
+            onCreateComment={this.handleCreateComment}
-              onCreateComment={this.handleCreateComment}
+            onEditComment={this.handleEditComment}
-              onEditComment={this.handleEditComment}
+          />
-            />
-          </div>
         );
       }
     }
@@ -607,7 +598,7 @@ export class Inbox extends Component<any, InboxState> {
       case "success": {
         const mentions = this.state.mentionsRes.data.mentions;
         return (
-          <div>
+          <>
             {mentions.map(umv => (
               <CommentNodes
                 key={umv.person_mention.id}
@@ -640,7 +631,7 @@ export class Inbox extends Component<any, InboxState> {
                 onEditComment={this.handleEditComment}
               />
             ))}
-          </div>
+          </>
         );
       }
     }
@@ -657,7 +648,7 @@ export class Inbox extends Component<any, InboxState> {
       case "success": {
         const messages = this.state.messagesRes.data.private_messages;
         return (
-          <div>
+          <>
             {messages.map(pmv => (
               <PrivateMessage
                 key={pmv.private_message.id}
@@ -669,7 +660,7 @@ export class Inbox extends Component<any, InboxState> {
                 onEdit={this.handleEditMessage}
               />
             ))}
-          </div>
+          </>
         );
       }
     }

src/shared/components/person/password-change.tsx

@@ -40,18 +40,16 @@ export class PasswordChange extends Component<any, State> {
 
   render() {
     return (
-      <div className="password-change container-lg">
+      <main className="password-change container-lg row mx-1 mx-md-auto">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
         />
-        <div className="row">
+        <div className="col-12 col-lg-6 offset-lg-3 mb-4">
-          <div className="col-12 col-lg-6 offset-lg-3 mb-4">
+          <h5>{I18NextService.i18n.t("password_change")}</h5>
-            <h5>{I18NextService.i18n.t("password_change")}</h5>
+          {this.passwordChangeForm()}
-            {this.passwordChangeForm()}
-          </div>
         </div>
-      </div>
+      </main>
     );
   }
 

src/shared/components/person/profile.tsx

@@ -316,7 +316,7 @@ export class Profile extends Component<
         const { page, sort, view } = getProfileQueryParams();
 
         return (
-          <div className="row">
+          <>
             <div className="col-12 col-md-8">
               <HtmlTags
                 title={this.documentTitle}
@@ -379,7 +379,7 @@ export class Profile extends Component<
               <Moderates moderates={personRes.moderates} />
               {this.amCurrentUser && <Follows />}
             </div>
-          </div>
+          </>
         );
       }
     }
@@ -387,9 +387,9 @@ export class Profile extends Component<
 
   render() {
     return (
-      <div className="person-profile container-lg">
+      <main className="person-profile container-lg row mx-1 mx-md-auto">
         {this.renderPersonRes()}
-      </div>
+      </main>
     );
   }
 
@@ -466,163 +466,150 @@ export class Profile extends Component<
             />
           )}
           <div className="mb-3">
-            <div className="">
+            <div className="mb-0 d-flex flex-wrap">
-              <div className="mb-0 d-flex flex-wrap">
+              <div>
-                <div>
+                {pv.person.display_name && (
-                  {pv.person.display_name && (
+                  <h5 className="mb-0">{pv.person.display_name}</h5>
-                    <h5 className="mb-0">{pv.person.display_name}</h5>
-                  )}
-                  <ul className="list-inline mb-2">
-                    <li className="list-inline-item">
-                      <PersonListing
-                        person={pv.person}
-                        realLink
-                        useApubName
-                        muted
-                        hideAvatar
-                      />
-                    </li>
-                    {isBanned(pv.person) && (
-                      <li className="list-inline-item badge text-bg-danger">
-                        {I18NextService.i18n.t("banned")}
-                      </li>
-                    )}
-                    {pv.person.deleted && (
-                      <li className="list-inline-item badge text-bg-danger">
-                        {I18NextService.i18n.t("deleted")}
-                      </li>
-                    )}
-                    {pv.person.admin && (
-                      <li className="list-inline-item badge text-bg-light">
-                        {I18NextService.i18n.t("admin")}
-                      </li>
-                    )}
-                    {pv.person.bot_account && (
-                      <li className="list-inline-item badge text-bg-light">
-                        {I18NextService.i18n.t("bot_account").toLowerCase()}
-                      </li>
-                    )}
-                  </ul>
-                </div>
-                {this.banDialog(pv)}
-                <div className="flex-grow-1 unselectable pointer mx-2"></div>
-                {!this.amCurrentUser && UserService.Instance.myUserInfo && (
-                  <>
-                    <a
-                      className={`d-flex align-self-start btn btn-secondary me-2 ${
-                        !pv.person.matrix_user_id && "invisible"
-                      }`}
-                      rel={relTags}
-                      href={`https://matrix.to/#/${pv.person.matrix_user_id}`}
-                    >
-                      {I18NextService.i18n.t("send_secure_message")}
-                    </a>
-                    <Link
-                      className={
-                        "d-flex align-self-start btn btn-secondary me-2"
-                      }
-                      to={`/create_private_message/${pv.person.id}`}
-                    >
-                      {I18NextService.i18n.t("send_message")}
-                    </Link>
-                    {personBlocked ? (
-                      <button
-                        className={
-                          "d-flex align-self-start btn btn-secondary me-2"
-                        }
-                        onClick={linkEvent(
-                          pv.person.id,
-                          this.handleUnblockPerson
-                        )}
-                      >
-                        {I18NextService.i18n.t("unblock_user")}
-                      </button>
-                    ) : (
-                      <button
-                        className={
-                          "d-flex align-self-start btn btn-secondary me-2"
-                        }
-                        onClick={linkEvent(
-                          pv.person.id,
-                          this.handleBlockPerson
-                        )}
-                      >
-                        {I18NextService.i18n.t("block_user")}
-                      </button>
-                    )}
-                  </>
                 )}
-
+                <ul className="list-inline mb-2">
-                {canMod(pv.person.id, undefined, admins) &&
+                  <li className="list-inline-item">
-                  !isAdmin(pv.person.id, admins) &&
+                    <PersonListing
-                  !showBanDialog &&
+                      person={pv.person}
-                  (!isBanned(pv.person) ? (
+                      realLink
+                      useApubName
+                      muted
+                      hideAvatar
+                    />
+                  </li>
+                  {isBanned(pv.person) && (
+                    <li className="list-inline-item badge text-bg-danger">
+                      {I18NextService.i18n.t("banned")}
+                    </li>
+                  )}
+                  {pv.person.deleted && (
+                    <li className="list-inline-item badge text-bg-danger">
+                      {I18NextService.i18n.t("deleted")}
+                    </li>
+                  )}
+                  {pv.person.admin && (
+                    <li className="list-inline-item badge text-bg-light">
+                      {I18NextService.i18n.t("admin")}
+                    </li>
+                  )}
+                  {pv.person.bot_account && (
+                    <li className="list-inline-item badge text-bg-light">
+                      {I18NextService.i18n.t("bot_account").toLowerCase()}
+                    </li>
+                  )}
+                </ul>
+              </div>
+              {this.banDialog(pv)}
+              <div className="flex-grow-1 unselectable pointer mx-2"></div>
+              {!this.amCurrentUser && UserService.Instance.myUserInfo && (
+                <>
+                  <a
+                    className={`d-flex align-self-start btn btn-secondary me-2 ${
+                      !pv.person.matrix_user_id && "invisible"
+                    }`}
+                    rel={relTags}
+                    href={`https://matrix.to/#/${pv.person.matrix_user_id}`}
+                  >
+                    {I18NextService.i18n.t("send_secure_message")}
+                  </a>
+                  <Link
+                    className={"d-flex align-self-start btn btn-secondary me-2"}
+                    to={`/create_private_message/${pv.person.id}`}
+                  >
+                    {I18NextService.i18n.t("send_message")}
+                  </Link>
+                  {personBlocked ? (
                     <button
                       className={
                         "d-flex align-self-start btn btn-secondary me-2"
                       }
-                      onClick={linkEvent(this, this.handleModBanShow)}
+                      onClick={linkEvent(
-                      aria-label={I18NextService.i18n.t("ban")}
+                        pv.person.id,
+                        this.handleUnblockPerson
+                      )}
                     >
-                      {capitalizeFirstLetter(I18NextService.i18n.t("ban"))}
+                      {I18NextService.i18n.t("unblock_user")}
                     </button>
                   ) : (
                     <button
                       className={
                         "d-flex align-self-start btn btn-secondary me-2"
                       }
-                      onClick={linkEvent(this, this.handleModBanSubmit)}
+                      onClick={linkEvent(pv.person.id, this.handleBlockPerson)}
-                      aria-label={I18NextService.i18n.t("unban")}
                     >
-                      {capitalizeFirstLetter(I18NextService.i18n.t("unban"))}
+                      {I18NextService.i18n.t("block_user")}
                     </button>
-                  ))}
+                  )}
-              </div>
+                </>
-              {pv.person.bio && (
-                <div className="d-flex align-items-center mb-2">
-                  <div
-                    className="md-div"
-                    dangerouslySetInnerHTML={mdToHtml(pv.person.bio)}
-                  />
-                </div>
               )}
-              <div>
+
-                <ul className="list-inline mb-2">
+              {canMod(pv.person.id, undefined, admins) &&
-                  <li className="list-inline-item badge text-bg-light">
+                !isAdmin(pv.person.id, admins) &&
-                    {I18NextService.i18n.t("number_of_posts", {
+                !showBanDialog &&
-                      count: Number(pv.counts.post_count),
+                (!isBanned(pv.person) ? (
-                      formattedCount: numToSI(pv.counts.post_count),
+                  <button
-                    })}
+                    className={"d-flex align-self-start btn btn-secondary me-2"}
-                  </li>
+                    onClick={linkEvent(this, this.handleModBanShow)}
-                  <li className="list-inline-item badge text-bg-light">
+                    aria-label={I18NextService.i18n.t("ban")}
-                    {I18NextService.i18n.t("number_of_comments", {
+                  >
-                      count: Number(pv.counts.comment_count),
+                    {capitalizeFirstLetter(I18NextService.i18n.t("ban"))}
-                      formattedCount: numToSI(pv.counts.comment_count),
+                  </button>
-                    })}
+                ) : (
-                  </li>
+                  <button
-                </ul>
+                    className={"d-flex align-self-start btn btn-secondary me-2"}
-              </div>
+                    onClick={linkEvent(this, this.handleModBanSubmit)}
-              <div className="text-muted">
+                    aria-label={I18NextService.i18n.t("unban")}
-                {I18NextService.i18n.t("joined")}{" "}
+                  >
-                <MomentTime
+                    {capitalizeFirstLetter(I18NextService.i18n.t("unban"))}
-                  published={pv.person.published}
+                  </button>
-                  showAgo
+                ))}
-                  ignoreUpdated
+            </div>
+            {pv.person.bio && (
+              <div className="d-flex align-items-center mb-2">
+                <div
+                  className="md-div"
+                  dangerouslySetInnerHTML={mdToHtml(pv.person.bio)}
                 />
               </div>
-              <div className="d-flex align-items-center text-muted mb-2">
+            )}
-                <Icon icon="cake" />
+            <ul className="list-inline mb-2">
-                <span className="ms-2">
+              <li className="list-inline-item badge text-bg-light">
-                  {I18NextService.i18n.t("cake_day_title")}{" "}
+                {I18NextService.i18n.t("number_of_posts", {
-                  {format(parseISO(pv.person.published), "PPP")}
+                  count: Number(pv.counts.post_count),
-                </span>
+                  formattedCount: numToSI(pv.counts.post_count),
-              </div>
+                })}
-              {!UserService.Instance.myUserInfo && (
+              </li>
-                <div className="alert alert-info" role="alert">
+              <li className="list-inline-item badge text-bg-light">
-                  {I18NextService.i18n.t("profile_not_logged_in_alert")}
+                {I18NextService.i18n.t("number_of_comments", {
-                </div>
+                  count: Number(pv.counts.comment_count),
-              )}
+                  formattedCount: numToSI(pv.counts.comment_count),
+                })}
+              </li>
+            </ul>
+            <div className="text-muted">
+              {I18NextService.i18n.t("joined")}{" "}
+              <MomentTime
+                published={pv.person.published}
+                showAgo
+                ignoreUpdated
+              />
             </div>
+            <div className="d-flex align-items-center text-muted mb-2">
+              <Icon icon="cake" />
+              <span className="ms-2">
+                {I18NextService.i18n.t("cake_day_title")}{" "}
+                {format(parseISO(pv.person.published), "PPP")}
+              </span>
+            </div>
+            {!UserService.Instance.myUserInfo && (
+              <div className="alert alert-info" role="alert">
+                {I18NextService.i18n.t("profile_not_logged_in_alert")}
+              </div>
+            )}
           </div>
         </div>
       )

src/shared/components/person/registration-applications.tsx

@@ -94,22 +94,20 @@ export class RegistrationApplications extends Component<
       case "success": {
         const apps = this.state.appsRes.data.registration_applications;
         return (
-          <div className="row">
+          <div className="col-12">
-            <div className="col-12">
+            <HtmlTags
-              <HtmlTags
+              title={this.documentTitle}
-                title={this.documentTitle}
+              path={this.context.router.route.match.url}
-                path={this.context.router.route.match.url}
+            />
-              />
+            <h5 className="mb-2">
-              <h5 className="mb-2">
+              {I18NextService.i18n.t("registration_applications")}
-                {I18NextService.i18n.t("registration_applications")}
+            </h5>
-              </h5>
+            {this.selects()}
-              {this.selects()}
+            {this.applicationList(apps)}
-              {this.applicationList(apps)}
+            <Paginator
-              <Paginator
+              page={this.state.page}
-                page={this.state.page}
+              onChange={this.handlePageChange}
-                onChange={this.handlePageChange}
+            />
-              />
-            </div>
           </div>
         );
       }
@@ -118,9 +116,9 @@ export class RegistrationApplications extends Component<
 
   render() {
     return (
-      <div className="registration-applications container-lg">
+      <main className="registration-applications container-lg row mx-1 mx-md-auto">
         {this.renderApps()}
-      </div>
+      </main>
     );
   }
 
@@ -169,7 +167,7 @@ export class RegistrationApplications extends Component<
 
   applicationList(apps: RegistrationApplicationView[]) {
     return (
-      <div>
+      <>
         {apps.map(ra => (
           <>
             <hr />
@@ -180,7 +178,7 @@ export class RegistrationApplications extends Component<
             />
           </>
         ))}
-      </div>
+      </>
     );
   }
 

src/shared/components/person/reports.tsx

@@ -145,23 +145,18 @@ export class Reports extends Component<any, ReportsState> {
 
   render() {
     return (
-      <div className="person-reports container-lg">
+      <main className="person-reports container-lg row mx-1 mx-md-auto">
-        <div className="row">
+        <div className="col-12">
-          <div className="col-12">
+          <HtmlTags
-            <HtmlTags
+            title={this.documentTitle}
-              title={this.documentTitle}
+            path={this.context.router.route.match.url}
-              path={this.context.router.route.match.url}
+          />
-            />
+          <h5 className="mb-2">{I18NextService.i18n.t("reports")}</h5>
-            <h5 className="mb-2">{I18NextService.i18n.t("reports")}</h5>
+          {this.selects()}
-            {this.selects()}
+          {this.section}
-            {this.section}
+          <Paginator page={this.state.page} onChange={this.handlePageChange} />
-            <Paginator
-              page={this.state.page}
-              onChange={this.handlePageChange}
-            />
-          </div>
         </div>
-      </div>
+      </main>
     );
   }
 
@@ -385,14 +380,14 @@ export class Reports extends Component<any, ReportsState> {
 
   all() {
     return (
-      <div>
+      <>
         {this.buildCombined.map(i => (
           <>
             <hr />
             {this.renderItemType(i)}
           </>
         ))}
-      </div>
+      </>
     );
   }
 
@@ -408,7 +403,7 @@ export class Reports extends Component<any, ReportsState> {
       case "success": {
         const reports = res.data.comment_reports;
         return (
-          <div>
+          <>
             {reports.map(cr => (
               <>
                 <hr />
@@ -419,7 +414,7 @@ export class Reports extends Component<any, ReportsState> {
                 />
               </>
             ))}
-          </div>
+          </>
         );
       }
     }
@@ -437,7 +432,7 @@ export class Reports extends Component<any, ReportsState> {
       case "success": {
         const reports = res.data.post_reports;
         return (
-          <div>
+          <>
             {reports.map(pr => (
               <>
                 <hr />
@@ -448,7 +443,7 @@ export class Reports extends Component<any, ReportsState> {
                 />
               </>
             ))}
-          </div>
+          </>
         );
       }
     }
@@ -466,7 +461,7 @@ export class Reports extends Component<any, ReportsState> {
       case "success": {
         const reports = res.data.private_message_reports;
         return (
-          <div>
+          <>
             {reports.map(pmr => (
               <>
                 <hr />
@@ -477,7 +472,7 @@ export class Reports extends Component<any, ReportsState> {
                 />
               </>
             ))}
-          </div>
+          </>
         );
       }
     }

src/shared/components/person/settings.tsx

@@ -238,7 +238,7 @@ export class Settings extends Component<any, SettingsState> {
 
   render() {
     return (
-      <div className="person-settings container-lg">
+      <main className="person-settings container-lg mx-1 mx-md-auto">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
@@ -259,7 +259,7 @@ export class Settings extends Component<any, SettingsState> {
             },
           ]}
         />
-      </div>
+      </main>
     );
   }
 

src/shared/components/person/verify-email.tsx

@@ -53,20 +53,18 @@ export class VerifyEmail extends Component<any, State> {
 
   render() {
     return (
-      <div className="verfy-email container-lg">
+      <div className="verfy-email container-lg row mx-1 mx-md-4">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
         />
-        <div className="row">
+        <div className="col-12 col-lg-6 offset-lg-3 mb-4">
-          <div className="col-12 col-lg-6 offset-lg-3 mb-4">
+          <h5>{I18NextService.i18n.t("verify_email")}</h5>
-            <h5>{I18NextService.i18n.t("verify_email")}</h5>
+          {this.state.verifyRes.state === "loading" && (
-            {this.state.verifyRes.state == "loading" && (
+            <h5>
-              <h5>
+              <Spinner large />
-                <Spinner large />
+            </h5>
-              </h5>
+          )}
-            )}
-          </div>
         </div>
       </div>
     );

src/shared/components/post/create-post.tsx

@@ -155,7 +155,7 @@ export class CreatePost extends Component<
       | undefined;
 
     return (
-      <div className="create-post container-lg">
+      <main className="create-post container-lg row mx-1 mx-md-auto">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
@@ -165,31 +165,26 @@ export class CreatePost extends Component<
             <Spinner large />
           </h5>
         ) : (
-          <div className="row">
+          <div id="createPostForm" className="col-12 col-lg-6 offset-lg-3 mb-4">
-            <div
+            <h1 className="h4">{I18NextService.i18n.t("create_post")}</h1>
-              id="createPostForm"
+            <PostForm
-              className="col-12 col-lg-6 offset-lg-3 mb-4"
+              onCreate={this.handlePostCreate}
-            >
+              params={locationState}
-              <h1 className="h4">{I18NextService.i18n.t("create_post")}</h1>
+              enableDownvotes={enableDownvotes(this.state.siteRes)}
-              <PostForm
+              enableNsfw={enableNsfw(this.state.siteRes)}
-                onCreate={this.handlePostCreate}
+              allLanguages={this.state.siteRes.all_languages}
-                params={locationState}
+              siteLanguages={this.state.siteRes.discussion_languages}
-                enableDownvotes={enableDownvotes(this.state.siteRes)}
+              selectedCommunityChoice={selectedCommunityChoice}
-                enableNsfw={enableNsfw(this.state.siteRes)}
+              onSelectCommunity={this.handleSelectedCommunityChange}
-                allLanguages={this.state.siteRes.all_languages}
+              initialCommunities={
-                siteLanguages={this.state.siteRes.discussion_languages}
+                this.state.initialCommunitiesRes.state === "success"
-                selectedCommunityChoice={selectedCommunityChoice}
+                  ? this.state.initialCommunitiesRes.data.communities
-                onSelectCommunity={this.handleSelectedCommunityChange}
+                  : []
-                initialCommunities={
+              }
-                  this.state.initialCommunitiesRes.state === "success"
+            />
-                    ? this.state.initialCommunitiesRes.data.communities
-                    : []
-                }
-              />
-            </div>
           </div>
         )}
-      </div>
+      </main>
     );
   }
 

src/shared/components/post/post-form.tsx

@@ -531,7 +531,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
               checked={this.state.form.nsfw}
               onChange={linkEvent(this, handlePostNsfwChange)}
             />
-            <label className="form-check-label">
+            <label className="form-check-label" htmlFor="post-nsfw">
               {I18NextService.i18n.t("nsfw")}
             </label>
           </div>

src/shared/components/post/post-listing.tsx

@@ -97,6 +97,9 @@ interface PostListingState {
   transferLoading: boolean;
 }
 
+const thumbnailClasses =
+  "thumbnail rounded bg-light d-block text-body d-flex align-items-center justify-content-center";
+
 interface PostListingProps {
   post_view: PostView;
   crossPosts?: PostView[];
@@ -196,7 +199,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const post = this.postView.post;
 
     return (
-      <div className="post-listing mt-2">
+      <div className="post-listing mt-2 container-lg">
         {!this.state.showEdit ? (
           <>
             {this.listing()}
@@ -241,20 +244,19 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     if (this.imageSrc) {
       return (
         <>
-          <div className="offset-sm-3 my-2 d-none d-sm-block">
+          <a
-            <a href={this.imageSrc} className="d-inline-block">
+            href={this.imageSrc}
-              <PictrsImage src={this.imageSrc} />
+            className="my-2 d-none d-sm-block card p-4 col-12 col-xl-10 col-xxl-8"
-            </a>
+          >
-          </div>
+            <PictrsImage src={this.imageSrc} />
-          <div className="my-2 d-block d-sm-none">
+          </a>
-            <button
+          <button
-              type="button"
+            type="button"
-              className="p-0 border-0 bg-transparent d-inline-block"
+            className="my-2 d-block d-sm-none"
-              onClick={linkEvent(this, this.handleImageExpandClick)}
+            onClick={linkEvent(this, this.handleImageExpandClick)}
-            >
+          >
-              <PictrsImage src={this.imageSrc} />
+            <PictrsImage src={this.imageSrc} />
-            </button>
+          </button>
-          </div>
         </>
       );
     }
@@ -314,16 +316,19 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
 
     if (!this.props.hideImage && url && isImage(url) && this.imageSrc) {
       return (
-        <a
+        <button
-          href={this.imageSrc}
+          type="button"
-          className="text-body d-inline-block position-relative mb-2"
+          className="text-body d-inline-block position-relative mb-2 border-0 bg-transparent text-white p-0"
           data-tippy-content={I18NextService.i18n.t("expand_here")}
           onClick={linkEvent(this, this.handleImageExpandClick)}
           aria-label={I18NextService.i18n.t("expand_here")}
         >
           {this.imgThumb(this.imageSrc)}
-          <Icon icon="image" classes="mini-overlay" />
+          <Icon
-        </a>
+            icon="image"
+            classes="mini-overlay position-absolute top-0 right-0"
+          />
+        </button>
       );
     } else if (!this.props.hideImage && url && thumbnail && this.imageSrc) {
       return (
@@ -334,14 +339,17 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           title={url}
         >
           {this.imgThumb(this.imageSrc)}
-          <Icon icon="external-link" classes="mini-overlay" />
+          <Icon
+            icon="external-link"
+            classes="mini-overlay position-absolute top-0 right-0"
+          />
         </a>
       );
     } else if (url) {
       if (!this.props.hideImage && isVideo(url)) {
         return (
           <a
-            className="text-body"
+            className={thumbnailClasses}
             href={url}
             title={url}
             rel={relTags}
@@ -349,30 +357,24 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
             onClick={linkEvent(this, this.handleImageExpandClick)}
             aria-label={I18NextService.i18n.t("expand_here")}
           >
-            <div className="thumbnail rounded bg-light d-flex justify-content-center">
+            <Icon icon="play" />
-              <Icon icon="play" classes="d-flex align-items-center" />
-            </div>
           </a>
         );
       } else {
         return (
-          <a className="text-body" href={url} title={url} rel={relTags}>
+          <a className={thumbnailClasses} href={url} title={url} rel={relTags}>
-            <div className="thumbnail rounded bg-light d-flex justify-content-center">
+            <Icon icon="external-link" />
-              <Icon icon="external-link" classes="d-flex align-items-center" />
-            </div>
           </a>
         );
       }
     } else {
       return (
         <Link
-          className="text-body"
+          className={thumbnailClasses}
           to={`/post/${post.id}`}
           title={I18NextService.i18n.t("comments")}
         >
-          <div className="thumbnail rounded bg-light d-flex justify-content-center">
+          <Icon icon="message-square" />
-            <Icon icon="message-square" classes="d-flex align-items-center" />
-          </div>
         </Link>
       );
     }
@@ -1340,10 +1342,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         <div className={`${this.state.imageExpanded ? "col-12" : "col-8"}`}>
           {this.postTitleLine()}
         </div>
-        <div className="col-4">
+        {!this.state.imageExpanded && (
-          {/* Post thumbnail */}
+          <div className="col-4 ">
-          {!this.state.imageExpanded && this.thumbnail()}
+            {/* Post body prev or thumbnail */}
-        </div>
+            {this.thumbnail()}
+          </div>
+        )}
       </div>
     ) : (
       this.postTitleLine()
@@ -1366,56 +1370,46 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     return (
       <>
         {/* The mobile view*/}
-        <div className="d-block d-sm-none">
+        <article className="d-block d-sm-none post-container">
-          <article className="row post-container">
+          {this.createdLine()}
-            <div className="col-12">
-              {this.createdLine()}
 
-              {/* If it has a thumbnail, do a right aligned thumbnail */}
+          {/* If it has a thumbnail, do a right aligned thumbnail */}
-              {this.mobileThumbnail()}
+          {this.mobileThumbnail()}
 
-              {/* Show a preview of the post body */}
+          {/* Show a preview of the post body */}
-              {this.showBodyPreview()}
+          {this.showBodyPreview()}
 
-              {this.commentsLine(true)}
+          {this.commentsLine(true)}
-              {this.userActionsLine()}
+          {this.userActionsLine()}
-              {this.duplicatesLine()}
+          {this.duplicatesLine()}
-              {this.removeAndBanDialogs()}
+          {this.removeAndBanDialogs()}
-            </div>
+        </article>
-          </article>
-        </div>
 
         {/* The larger view*/}
-        <div className="d-none d-sm-block">
+        <article className="d-none d-sm-flex row post-container">
-          <article className="row post-container">
+          {!this.props.viewOnly && (
-            {!this.props.viewOnly && (
+            <VoteButtons
-              <VoteButtons
+              voteContentType={VoteContentType.Post}
-                voteContentType={VoteContentType.Post}
+              id={this.postView.post.id}
-                id={this.postView.post.id}
+              onVote={this.props.onPostVote}
-                onVote={this.props.onPostVote}
+              enableDownvotes={this.props.enableDownvotes}
-                enableDownvotes={this.props.enableDownvotes}
+              counts={this.postView.counts}
-                counts={this.postView.counts}
+              my_vote={this.postView.my_vote}
-                my_vote={this.postView.my_vote}
+            />
-              />
+          )}
-            )}
+          <div className="col-2 col-xl-1 pe-0 post-media d-flex align-items-center justify-content-center">
-            <div className="col-sm-2 pe-0 post-media">
+            {this.thumbnail()}
-              <div className="">{this.thumbnail()}</div>
+          </div>
-            </div>
+          <div className="col-9 col-xl-10">
-            <div className="col-12 col-sm-9">
+            {this.postTitleLine()}
-              <div className="row">
+            {this.createdLine()}
-                <div className="col-12">
+            {this.showBodyPreview()}
-                  {this.postTitleLine()}
+            {this.commentsLine()}
-                  {this.createdLine()}
+            {this.duplicatesLine()}
-                  {this.showBodyPreview()}
+            {this.userActionsLine()}
-                  {this.commentsLine()}
+            {this.removeAndBanDialogs()}
-                  {this.duplicatesLine()}
+          </div>
-                  {this.userActionsLine()}
+        </article>
-                  {this.removeAndBanDialogs()}
-                </div>
-              </div>
-            </div>
-          </article>
-        </div>
       </>
     );
   }

src/shared/components/post/post.tsx

@@ -347,8 +347,8 @@ export class Post extends Component<any, PostState> {
       case "success": {
         const res = this.state.postRes.data;
         return (
-          <div className="row">
+          <>
-            <div className="col-12 col-md-8 mb-3">
+            <main className="col-12 col-md-8 col-xl-10 mb-3">
               <HtmlTags
                 title={this.documentTitle}
                 path={this.context.router.route.match.url}
@@ -411,20 +411,26 @@ export class Post extends Component<any, PostState> {
                 {this.state.showSidebarMobile && this.sidebar()}
               </div>
               {this.sortRadios()}
-              {this.state.commentViewType == CommentViewType.Tree &&
+              {this.state.commentViewType === CommentViewType.Tree &&
                 this.commentsTree()}
-              {this.state.commentViewType == CommentViewType.Flat &&
+              {this.state.commentViewType === CommentViewType.Flat &&
                 this.commentsFlat()}
+            </main>
+            <div className="d-none d-md-block col-md-4 col-xl-2">
+              {this.sidebar()}
             </div>
-            <div className="d-none d-md-block col-md-4">{this.sidebar()}</div>
+          </>
-          </div>
         );
       }
     }
   }
 
   render() {
-    return <div className="post container-lg">{this.renderPostRes()}</div>;
+    return (
+      <div className="post container-lg row mx-1 mx-md-auto">
+        {this.renderPostRes()}
+      </div>
+    );
   }
 
   sortRadios() {
@@ -586,7 +592,7 @@ export class Post extends Component<any, PostState> {
 
     return (
       res.state == "success" && (
-        <div>
+        <>
           {!!this.state.commentId && (
             <>
               <button
@@ -636,7 +642,7 @@ export class Post extends Component<any, PostState> {
             onCreateComment={this.handleCreateComment}
             onEditComment={this.handleEditComment}
           />
-        </div>
+        </>
       )
     );
   }

src/shared/components/private_message/create-private-message.tsx

@@ -113,16 +113,14 @@ export class CreatePrivateMessage extends Component<
       case "success": {
         const res = this.state.recipientRes.data;
         return (
-          <div className="row">
+          <div className="col-12 col-lg-6 offset-lg-3 mb-4">
-            <div className="col-12 col-lg-6 offset-lg-3 mb-4">
+            <h1 className="h4">
-              <h1 className="h4">
+              {I18NextService.i18n.t("create_private_message")}
-                {I18NextService.i18n.t("create_private_message")}
+            </h1>
-              </h1>
+            <PrivateMessageForm
-              <PrivateMessageForm
+              onCreate={this.handlePrivateMessageCreate}
-                onCreate={this.handlePrivateMessageCreate}
+              recipient={res.person_view.person}
-                recipient={res.person_view.person}
+            />
-              />
-            </div>
           </div>
         );
       }
@@ -131,13 +129,13 @@ export class CreatePrivateMessage extends Component<
 
   render() {
     return (
-      <div className="create-private-message container-lg">
+      <main className="create-private-message container-lg row mx-1 mx-md-auto">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
         />
         {this.renderRecipientRes()}
-      </div>
+      </main>
     );
   }
 

src/shared/components/search.tsx

@@ -181,7 +181,7 @@ const Filter = ({
   loading: boolean;
 }) => {
   return (
-    <div className="mb-3 col-sm-6">
+    <div className="mb-3 col-sm-6 col-xl-4 col-xxl-3">
       <label className="col-form-label me-2" htmlFor={`${filterType}-filter`}>
         {capitalizeFirstLetter(I18NextService.i18n.t(filterType))}
       </label>
@@ -454,7 +454,7 @@ export class Search extends Component<any, SearchState> {
     const { type, page } = getSearchQueryParams();
 
     return (
-      <div className="search container-lg">
+      <main className="search container-lg mx-1 mx-md-auto">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
@@ -468,7 +468,7 @@ export class Search extends Component<any, SearchState> {
             <span>{I18NextService.i18n.t("no_results")}</span>
           )}
         <Paginator page={page} onChange={this.handlePageChange} />
-      </div>
+      </main>
     );
   }
 
@@ -656,7 +656,7 @@ export class Search extends Component<any, SearchState> {
     const combined = this.buildCombined();
 
     return (
-      <div>
+      <>
         {combined.map(i => (
           <div key={i.published} className="row">
             <div className="col-12">
@@ -737,7 +737,7 @@ export class Search extends Component<any, SearchState> {
             </div>
           </div>
         ))}
-      </div>
+      </>
     );
   }