Merge branch 'main' into feat/pureblack-theme

2024-12-23 03:11:25 +00:00 · 2023-06-27 11:31:07 -04:00 · 2023-06-27 11:31:07 -04:00 · 93e015393c
commit 93e015393c
parent 63337848ed 934cabcec4
20 changed files with 564 additions and 455 deletions
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "lemmy-ui",
-  "version": "0.18.0",
+  "version": "0.18.1-rc.1",
  "description": "An isomorphic UI for lemmy",
  "repository": "https://github.com/LemmyNet/lemmy-ui",
  "license": "AGPL-3.0",
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@ -198,9 +198,9 @@ blockquote {

 .thumbnail {
  object-fit: cover;
-  min-height: 60px;
-  max-height: 80px;
+  aspect-ratio: 4/3;
  width: 100%;
+  max-height: 6rem;
 }

 .thumbnail svg {
@ -360,8 +360,9 @@ br.big {
 }

 .img-icon {
-  width: 2rem;
-  height: 2rem;
+  width: calc(var(--bs-body-line-height) * 1em);
+  height: calc(var(--bs-body-line-height) * 1em);
+  border-radius: 0.25em;
 }

 .tribute-container ul {
--- a/src/assets/css/themes/_variables.scss
+++ b/src/assets/css/themes/_variables.scss
@ -1,7 +1,3 @@
 $link-decoration: none;
 $min-contrast-ratio: 3;
 $font-size-base: 0.875rem;
-
-$container-max-widths: (
-  lg: 1140px,
-);
--- a/src/assets/css/themes/darkly-red.css
+++ b/src/assets/css/themes/darkly-red.css
@ -726,7 +726,11 @@ progress {

 .container,
 .container-fluid,
-.container-lg {
+.container-xxl,
+.container-xl,
+.container-lg,
+.container-md,
+.container-sm {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
@ -736,11 +740,31 @@ progress {
  margin-left: auto;
 }

+@media (min-width: 576px) {
+  .container-sm, .container {
+    max-width: 540px;
+  }
+}
+@media (min-width: 768px) {
+  .container-md, .container-sm, .container {
+    max-width: 720px;
+  }
+}
@media (min-width: 992px) {
  .container-lg, .container-md, .container-sm, .container {
+    max-width: 960px;
+  }
+}
+@media (min-width: 1200px) {
+  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1140px;
  }
 }
+@media (min-width: 1400px) {
+  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
+    max-width: 1320px;
+  }
+}
 :root {
  --bs-breakpoint-xs: 0;
  --bs-breakpoint-sm: 576px;
@ -3867,7 +3891,11 @@ textarea.form-control-lg {
 }
 .navbar > .container,
 .navbar > .container-fluid,
-.navbar > .container-lg {
+.navbar > .container-sm,
+.navbar > .container-md,
+.navbar > .container-lg,
+.navbar > .container-xl,
+.navbar > .container-xxl {
  display: flex;
  flex-wrap: inherit;
  align-items: center;
--- a/src/assets/css/themes/darkly.css
+++ b/src/assets/css/themes/darkly.css
@ -726,7 +726,11 @@ progress {

 .container,
 .container-fluid,
-.container-lg {
+.container-xxl,
+.container-xl,
+.container-lg,
+.container-md,
+.container-sm {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
@ -736,11 +740,31 @@ progress {
  margin-left: auto;
 }

+@media (min-width: 576px) {
+  .container-sm, .container {
+    max-width: 540px;
+  }
+}
+@media (min-width: 768px) {
+  .container-md, .container-sm, .container {
+    max-width: 720px;
+  }
+}
@media (min-width: 992px) {
  .container-lg, .container-md, .container-sm, .container {
+    max-width: 960px;
+  }
+}
+@media (min-width: 1200px) {
+  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1140px;
  }
 }
+@media (min-width: 1400px) {
+  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
+    max-width: 1320px;
+  }
+}
 :root {
  --bs-breakpoint-xs: 0;
  --bs-breakpoint-sm: 576px;
@ -3867,7 +3891,11 @@ textarea.form-control-lg {
 }
 .navbar > .container,
 .navbar > .container-fluid,
-.navbar > .container-lg {
+.navbar > .container-sm,
+.navbar > .container-md,
+.navbar > .container-lg,
+.navbar > .container-xl,
+.navbar > .container-xxl {
  display: flex;
  flex-wrap: inherit;
  align-items: center;
--- a/src/assets/css/themes/litely-red.css
+++ b/src/assets/css/themes/litely-red.css
@ -725,7 +725,11 @@ progress {

 .container,
 .container-fluid,
-.container-lg {
+.container-xxl,
+.container-xl,
+.container-lg,
+.container-md,
+.container-sm {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
@ -735,11 +739,31 @@ progress {
  margin-left: auto;
 }

+@media (min-width: 576px) {
+  .container-sm, .container {
+    max-width: 540px;
+  }
+}
+@media (min-width: 768px) {
+  .container-md, .container-sm, .container {
+    max-width: 720px;
+  }
+}
@media (min-width: 992px) {
  .container-lg, .container-md, .container-sm, .container {
+    max-width: 960px;
+  }
+}
+@media (min-width: 1200px) {
+  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1140px;
  }
 }
+@media (min-width: 1400px) {
+  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
+    max-width: 1320px;
+  }
+}
 :root {
  --bs-breakpoint-xs: 0;
  --bs-breakpoint-sm: 576px;
@ -3866,7 +3890,11 @@ textarea.form-control-lg {
 }
 .navbar > .container,
 .navbar > .container-fluid,
-.navbar > .container-lg {
+.navbar > .container-sm,
+.navbar > .container-md,
+.navbar > .container-lg,
+.navbar > .container-xl,
+.navbar > .container-xxl {
  display: flex;
  flex-wrap: inherit;
  align-items: center;
--- a/src/assets/css/themes/litely.css
+++ b/src/assets/css/themes/litely.css
@ -725,7 +725,11 @@ progress {

 .container,
 .container-fluid,
-.container-lg {
+.container-xxl,
+.container-xl,
+.container-lg,
+.container-md,
+.container-sm {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
@ -735,11 +739,31 @@ progress {
  margin-left: auto;
 }

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

--- a/src/shared/components/common/pictrs-image.tsx
+++ b/src/shared/components/common/pictrs-image.tsx
@ -39,7 +39,7 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
            "img-expanded slight-radius":
              !this.props.thumbnail && !this.props.icon,
            "img-blur": this.props.thumbnail && this.props.nsfw,
-            "rounded-circle img-cover img-icon me-2": this.props.icon,
+            "img-cover img-icon me-1": this.props.icon,
            "ms-2 mb-0 rounded-circle img-cover avatar-overlay":
              this.props.iconOverlay,
            "avatar-pushup": this.props.pushup,
--- a/src/shared/components/common/vote-buttons.tsx
+++ b/src/shared/components/common/vote-buttons.tsx
@ -104,7 +104,7 @@ export class VoteButtonsCompact extends Component<

  render() {
    return (
-      <div>
+      <>
        <button
          type="button"
          className={`btn-animate btn py-0 px-1 ${
@ -157,7 +157,7 @@ export class VoteButtonsCompact extends Component<
            )}
          </button>
        )}
-      </div>
+      </>
    );
  }
 }
@ -174,7 +174,7 @@ export class VoteButtons extends Component<VoteButtonsProps, VoteButtonsState> {

  render() {
    return (
-      <div className="vote-bar col-1 pe-0 small text-center">
+      <div className="vote-bar pe-0 small text-center">
        <button
          type="button"
          className={`btn-animate btn btn-link p-0 ${
--- a/src/shared/components/community/community.tsx
+++ b/src/shared/components/community/community.tsx
@ -317,7 +317,10 @@ export class Community extends Component<
            />

            <div className="row">
-              <main className="col-12 col-md-8" ref={this.mainContentRef}>
+              <main
+                className="col-12 col-md-8 col-lg-9"
+                ref={this.mainContentRef}
+              >
                {this.communityInfo(res)}
                <div className="d-block d-md-none">
                  <button
@ -340,7 +343,7 @@ export class Community extends Component<
                {this.listings(res)}
                <Paginator page={page} onChange={this.handlePageChange} />
              </main>
-              <aside className="d-none d-md-block col-md-4">
+              <aside className="d-none d-md-block col-md-4 col-lg-3">
                {this.sidebar(res)}
              </aside>
            </div>
--- a/src/shared/components/home/home.tsx
+++ b/src/shared/components/home/home.tsx
@ -387,7 +387,7 @@ export class Home extends Component<any, HomeState> {
        />
        {site_setup && (
          <div className="row">
-            <main role="main" className="col-12 col-md-8">
+            <main role="main" className="col-12 col-md-8 col-lg-9">
              {tagline && (
                <div
                  id="tagline"
@ -397,7 +397,7 @@ export class Home extends Component<any, HomeState> {
              <div className="d-block d-md-none">{this.mobileView}</div>
              {this.posts}
            </main>
-            <aside className="d-none d-md-block col-md-4">
+            <aside className="d-none d-md-block col-md-4 col-lg-3">
              {this.mySidebar}
            </aside>
          </div>
--- a/src/shared/components/home/signup.tsx
+++ b/src/shared/components/home/signup.tsx
@ -140,7 +140,10 @@ export class Signup extends Component<any, State> {
  registerForm() {
    const siteView = this.state.siteRes.site_view;
    return (
-      <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
+      <form
+        className="was-validated"
+        onSubmit={linkEvent(this, this.handleRegisterSubmit)}
+      >
        <h5>{this.titleName(siteView)}</h5>

        {this.isLemmyMl && (
--- a/src/shared/components/home/site-form.tsx
+++ b/src/shared/components/home/site-form.tsx
@ -4,6 +4,7 @@ import {
  Component,
  InfernoKeyboardEvent,
  InfernoMouseEvent,
+  InfernoNode,
  linkEvent,
 } from "inferno";
 import {
@ -13,6 +14,7 @@ import {
  Instance,
  ListingType,
 } from "lemmy-js-client";
+import deepEqual from "lodash.isequal";
 import { I18NextService } from "../../services";
 import { Icon, Spinner } from "../common/icon";
 import { ImageUploadForm } from "../common/image-upload-form";
@ -55,6 +57,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
  initSiteForm(): EditSite {
    const site = this.props.siteRes.site_view.site;
    const ls = this.props.siteRes.site_view.local_site;
+
    return {
      name: site.name,
      sidebar: site.sidebar,
@ -619,6 +622,19 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
    );
  }

+  componentDidUpdate(
+    prevProps: Readonly<{ children?: InfernoNode } & SiteFormProps>
+  ) {
+    if (
+      !(
+        deepEqual(prevProps.allowedInstances, this.props.allowedInstances) ||
+        deepEqual(prevProps.blockedInstances, this.props.blockedInstances)
+      )
+    ) {
+      this.setState({ siteForm: this.initSiteForm() });
+    }
+  }
+
  federatedInstanceSelect(key: InstanceKey) {
    const id = `create_site_${key}`;
    const value = this.state.instance_select[key];
--- a/src/shared/components/person/profile.tsx
+++ b/src/shared/components/person/profile.tsx
@ -205,6 +205,7 @@ export class Profile extends Component<
    this.handleSavePost = this.handleSavePost.bind(this);
    this.handlePurgePost = this.handlePurgePost.bind(this);
    this.handleFeaturePost = this.handleFeaturePost.bind(this);
+    this.handleModBanSubmit = this.handleModBanSubmit.bind(this);

    // Only fetch the data if coming from another route
    if (FirstLoadService.isFirstLoad) {
@ -691,6 +692,8 @@ export class Profile extends Component<
            >
              {I18NextService.i18n.t("cancel")}
            </button>
+          </div>
+          <div className="mb-3 row">
            <button
              type="submit"
              className="btn btn-secondary"
@ -987,6 +990,7 @@ export class Profile extends Component<
          s.personRes.data.comments
            .filter(c => c.creator.id == banRes.data.person_view.person.id)
            .forEach(c => (c.creator.banned = banRes.data.banned));
+          s.personRes.data.person_view.person.banned = banRes.data.banned;
        }
        return s;
      });
--- a/src/shared/components/post/metadata-card.tsx
+++ b/src/shared/components/post/metadata-card.tsx
@ -8,60 +8,54 @@ interface MetadataCardProps {
  post: Post;
 }

-interface MetadataCardState {
-  expanded: boolean;
-}
-
-export class MetadataCard extends Component<
-  MetadataCardProps,
-  MetadataCardState
-> {
+export class MetadataCard extends Component<MetadataCardProps> {
  constructor(props: any, context: any) {
    super(props, context);
  }

  render() {
    const post = this.props.post;
-    return (
-      <>
-        {post.embed_title && post.url && (
-          <div className="post-metadata-card card border-secondary mt-3 mb-2">
-            <div className="row">
-              <div className="col-12">
-                <div className="card-body">
-                  {post.name !== post.embed_title && (
-                    <>
-                      <h5 className="card-title d-inline">
-                        <a className="text-body" href={post.url} rel={relTags}>
-                          {post.embed_title}
-                        </a>
-                      </h5>
-                      <span className="d-inline-block ms-2 mb-2 small text-muted">
-                        <a
-                          className="text-muted fst-italic"
-                          href={post.url}
-                          rel={relTags}
-                        >
-                          {new URL(post.url).hostname}
-                          <Icon icon="external-link" classes="ms-1" />
-                        </a>
-                      </span>
-                    </>
-                  )}
-                  {post.embed_description && (
-                    <div
-                      className="card-text small text-muted md-div"
-                      dangerouslySetInnerHTML={{
-                        __html: sanitizeHtml(post.embed_description),
-                      }}
-                    />
-                  )}
-                </div>
+
+    if (post.embed_title && post.url) {
+      return (
+        <div className="post-metadata-card card border-secondary mt-3 mb-2">
+          <div className="row">
+            <div className="col-12">
+              <div className="card-body">
+                {post.name !== post.embed_title && (
+                  <>
+                    <h5 className="card-title d-inline">
+                      <a className="text-body" href={post.url} rel={relTags}>
+                        {post.embed_title}
+                      </a>
+                    </h5>
+                    <span className="d-inline-block ms-2 mb-2 small text-muted">
+                      <a
+                        className="text-muted fst-italic"
+                        href={post.url}
+                        rel={relTags}
+                      >
+                        {new URL(post.url).hostname}
+                        <Icon icon="external-link" classes="ms-1" />
+                      </a>
+                    </span>
+                  </>
+                )}
+                {post.embed_description && (
+                  <div
+                    className="card-text small text-muted md-div"
+                    dangerouslySetInnerHTML={{
+                      __html: sanitizeHtml(post.embed_description),
+                    }}
+                  />
+                )}
              </div>
            </div>
          </div>
-        )}
-      </>
-    );
+        </div>
+      );
+    } else {
+      return <></>;
+    }
  }
 }
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@ -49,7 +49,7 @@ import {
  PurgeType,
  VoteContentType,
 } from "../../interfaces";
-import { mdNoImages, mdToHtml, mdToHtmlInline } from "../../markdown";
+import { mdToHtml, mdToHtmlInline } from "../../markdown";
 import { I18NextService, UserService } from "../../services";
 import { setupTippy } from "../../tippy";
 import { Icon, PurgeWarning, Spinner } from "../common/icon";
@ -105,6 +105,9 @@ interface PostListingProps {
  allLanguages: Language[];
  siteLanguages: number[];
  showCommunity?: boolean;
+  /**
+   * Controls whether to show both the body *and* the metadata preview card
+   */
  showBody?: boolean;
  hideImage?: boolean;
  enableDownvotes?: boolean;
@ -183,7 +186,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
        addModLoading: false,
        addAdminLoading: false,
        transferLoading: false,
-        imageExpanded: false,
      });
    }
  }
@ -201,7 +203,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
          <>
            {this.listing()}
            {this.state.imageExpanded && !this.props.hideImage && this.img}
-            {post.url && this.state.showBody && post.embed_title && (
+            {this.showBody && post.url && post.embed_title && (
              <MetadataCard post={post} />
            )}
            {this.showBody && this.body()}
@ -397,7 +399,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
    const post_view = this.postView;
    return (
      <span className="small">
-        <PersonListing person={post_view.creator} muted={true} />
+        <PersonListing person={post_view.creator} />
        {this.creatorIsMod_ && (
          <span className="mx-1 badge text-bg-light">
            {I18NextService.i18n.t("mod")}
@ -482,26 +484,22 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
              this.postLink
            )}
          </h5>
-          {(url && isImage(url)) ||
-            (post.thumbnail_url && (
-              <button
-                className="btn btn-sm text-monospace text-muted d-inline-block"
-                data-tippy-content={I18NextService.i18n.t("expand_here")}
-                onClick={linkEvent(this, this.handleImageExpandClick)}
-              >
-                <Icon
-                  icon={
-                    !this.state.imageExpanded ? "plus-square" : "minus-square"
-                  }
-                  classes="icon-inline"
-                />
-              </button>
-            ))}
+
+          {/**
+           * If there is a URL, an embed title, and we were not told to show the
+           * body by the parent component, show the MetadataCard/body toggle.
+           */}
+          {!this.props.showBody &&
+            post.url &&
+            post.embed_title &&
+            this.showPreviewButton()}
+
          {post.removed && (
            <small className="ms-2 badge text-bg-secondary">
              {I18NextService.i18n.t("removed")}
            </small>
          )}
+
          {post.deleted && (
            <small
              className="unselectable pointer ms-2 text-muted fst-italic"
@ -510,6 +508,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
              <Icon icon="trash" classes="icon-inline text-danger" />
            </small>
          )}
+
          {post.locked && (
            <small
              className="unselectable pointer ms-2 text-muted fst-italic"
@ -518,6 +517,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
              <Icon icon="lock" classes="icon-inline text-danger" />
            </small>
          )}
+
          {post.featured_community && (
            <small
              className="unselectable pointer ms-2 text-muted fst-italic"
@ -529,6 +529,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
              <Icon icon="pin" classes="icon-inline text-primary" />
            </small>
          )}
+
          {post.featured_local && (
            <small
              className="unselectable pointer ms-2 text-muted fst-italic"
@ -538,6 +539,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
              <Icon icon="pin" classes="icon-inline text-secondary" />
            </small>
          )}
+
          {post.nsfw && (
            <small className="ms-2 badge text-bg-danger">
              {I18NextService.i18n.t("nsfw")}
@ -634,27 +636,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
    );
  }

-  showPreviewButton() {
-    const post_view = this.postView;
-    const body = post_view.post.body;
-
-    return (
-      <button
-        className="btn btn-sm btn-animate text-muted py-0"
-        data-tippy-content={body && mdNoImages.render(body)}
-        data-tippy-allowHtml={true}
-        onClick={linkEvent(this, this.handleShowBody)}
-      >
-        <Icon
-          icon="book-open"
-          classes={classNames("icon-inline me-1", {
-            "text-success": this.state.showBody,
-          })}
-        />
-      </button>
-    );
-  }
-
  postActions() {
    // Possible enhancement: Priority+ pattern instead of just hard coding which get hidden behind the show more button.
    // Possible enhancement: Make each button a component.
@ -666,14 +647,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
        {this.saveButton}
        {this.crossPostButton}

-        {/**
-         * If there is a URL, or if the post has a body and we were told not to
-         * show the body, show the MetadataCard/body toggle.
-         */}
-        {(post.url || (post.body && !this.props.showBody)) &&
-          this.showPreviewButton()}
-
-        {this.showBody && post_view.post.body && this.viewSourceButton}
+        {this.props.showBody && post_view.post.body && this.viewSourceButton}

        <div className="dropdown">
          <button
@ -1397,15 +1371,18 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
    );
  }

-  showBodyPreview() {
-    const { body, id } = this.postView.post;
-
-    return !this.showBody && body ? (
-      <Link className="text-body mt-2 d-block" to={`/post/${id}`}>
-        <div className="md-div mb-1 preview-lines">{body}</div>
-      </Link>
-    ) : (
-      <></>
+  showPreviewButton() {
+    return (
+      <button
+        type="button"
+        className="btn btn-sm btn-link link-dark link-opacity-75 link-opacity-100-hover py-0 align-baseline"
+        onClick={linkEvent(this, this.handleShowBody)}
+      >
+        <Icon
+          icon={!this.state.showBody ? "plus-square" : "minus-square"}
+          classes="icon-inline"
+        />
+      </button>
    );
  }

@ -1421,9 +1398,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
              {/* If it has a thumbnail, do a right aligned thumbnail */}
              {this.mobileThumbnail()}

-              {/* Show a preview of the post body */}
-              {this.showBodyPreview()}
-
              {this.commentsLine(true)}
              {this.userActionsLine()}
              {this.duplicatesLine()}
@ -1436,24 +1410,25 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
        <div className="d-none d-sm-block">
          <article className="row post-container">
            {!this.props.viewOnly && (
-              <VoteButtons
-                voteContentType={VoteContentType.Post}
-                id={this.postView.post.id}
-                onVote={this.props.onPostVote}
-                enableDownvotes={this.props.enableDownvotes}
-                counts={this.postView.counts}
-                my_vote={this.postView.my_vote}
-              />
+              <div className="col flex-grow-0">
+                <VoteButtons
+                  voteContentType={VoteContentType.Post}
+                  id={this.postView.post.id}
+                  onVote={this.props.onPostVote}
+                  enableDownvotes={this.props.enableDownvotes}
+                  counts={this.postView.counts}
+                  my_vote={this.postView.my_vote}
+                />
+              </div>
            )}
-            <div className="col-sm-2 pe-0 post-media">
-              <div className="">{this.thumbnail()}</div>
-            </div>
-            <div className="col-12 col-sm-9">
+            <div className="col flex-grow-1">
              <div className="row">
-                <div className="col-12">
+                <div className="col-sm-3 col-lg-2 pe-0 post-media">
+                  <div className="">{this.thumbnail()}</div>
+                </div>
+                <div className="col-12 col-sm-9 col-lg-10">
                  {this.postTitleLine()}
                  {this.createdLine()}
-                  {this.showBodyPreview()}
                  {this.commentsLine()}
                  {this.duplicatesLine()}
                  {this.userActionsLine()}
--- a/src/shared/components/post/post.tsx
+++ b/src/shared/components/post/post.tsx
@ -348,7 +348,7 @@ export class Post extends Component<any, PostState> {
        const res = this.state.postRes.data;
        return (
          <div className="row">
-            <main className="col-12 col-md-8 mb-3">
+            <main className="col-12 col-md-8 col-lg-9 mb-3">
              <HtmlTags
                title={this.documentTitle}
                path={this.context.router.route.match.url}
@ -416,7 +416,7 @@ export class Post extends Component<any, PostState> {
              {this.state.commentViewType == CommentViewType.Flat &&
                this.commentsFlat()}
            </main>
-            <aside className="d-none d-md-block col-md-4">
+            <aside className="d-none d-md-block col-md-4 col-lg-3">
              {this.sidebar()}
            </aside>
          </div>
--- a/src/shared/config.ts
+++ b/src/shared/config.ts
@ -21,7 +21,7 @@ export const markdownFieldCharacterLimit = 50000;
 export const maxUploadImages = 20;
 export const concurrentImageUpload = 4;
 export const updateUnreadCountsInterval = 30000;
-export const fetchLimit = 40;
+export const fetchLimit = 20;
 export const relTags = "noopener nofollow";
 export const emDash = "\u2014";

--- a/webpack.config.js
+++ b/webpack.config.js
@ -6,8 +6,7 @@ const CopyPlugin = require("copy-webpack-plugin");
 const RunNodeWebpackPlugin = require("run-node-webpack-plugin");
 const merge = require("lodash.merge");
 const { ServiceWorkerPlugin } = require("service-worker-webpack");
-const BundleAnalyzerPlugin =
-  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
+
 const banner = `
  hash:[contentHash], chunkhash:[chunkhash], name:[name], filebase:[base], query:[query], file:[file]
  Source code: https://github.com/LemmyNet/lemmy-ui
@ -156,6 +155,8 @@ const createClientConfig = (_env, mode) => {
  });

  if (mode === "none") {
+    const BundleAnalyzerPlugin =
+      require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
    config.plugins.push(new BundleAnalyzerPlugin());
  }