Merge remote-tracking branch 'glitch/main'

- Remove Helm charts
- Lots of conflicts with our removal of recommended settings and custom
  icons

13 files changed, 1356 insertions, 353 deletions

diff --git a/app/javascript/flavours/glitch/styles/components/about.scss b/app/javascript/flavours/glitch/styles/components/about.scss
new file mode 100644
index 000000000..c6cc6c615
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles/components/about.scss
@@ -0,0 +1,274 @@
+.image {
+  position: relative;
+  overflow: hidden;
+
+  &__preview {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  &.loaded &__preview {
+    display: none;
+  }
+
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border: 0;
+    background: transparent;
+    opacity: 0;
+  }
+
+  &.loaded img {
+    opacity: 1;
+  }
+}
+
+.link-footer {
+  flex: 0 0 auto;
+  padding: 10px;
+  padding-top: 20px;
+  z-index: 1;
+  font-size: 13px;
+
+  p {
+    color: $dark-text-color;
+    margin-bottom: 20px;
+
+    strong {
+      font-weight: 500;
+    }
+
+    a {
+      color: $dark-text-color;
+      text-decoration: underline;
+
+      &:hover,
+      &:focus,
+      &:active {
+        text-decoration: none;
+      }
+    }
+  }
+}
+
+.about {
+  padding: 20px;
+
+  @media screen and (min-width: $no-gap-breakpoint) {
+    border-radius: 4px;
+  }
+
+  &__footer {
+    color: $dark-text-color;
+    text-align: center;
+    font-size: 15px;
+    line-height: 22px;
+    margin-top: 20px;
+  }
+
+  &__header {
+    margin-bottom: 30px;
+
+    &__hero {
+      width: 100%;
+      height: auto;
+      aspect-ratio: 1.9;
+      background: lighten($ui-base-color, 4%);
+      border-radius: 8px;
+      margin-bottom: 30px;
+    }
+
+    h1,
+    p {
+      text-align: center;
+    }
+
+    h1 {
+      font-size: 24px;
+      line-height: 1.5;
+      font-weight: 700;
+      margin-bottom: 10px;
+    }
+
+    p {
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 400;
+      color: $darker-text-color;
+    }
+  }
+
+  &__meta {
+    background: lighten($ui-base-color, 4%);
+    border-radius: 4px;
+    display: flex;
+    margin-bottom: 30px;
+    font-size: 15px;
+
+    &__column {
+      box-sizing: border-box;
+      width: 50%;
+      padding: 20px;
+    }
+
+    &__divider {
+      width: 0;
+      border: 0;
+      border-style: solid;
+      border-color: lighten($ui-base-color, 8%);
+      border-left-width: 1px;
+      min-height: calc(100% - 60px);
+      flex: 0 0 auto;
+    }
+
+    h4 {
+      font-size: 15px;
+      text-transform: uppercase;
+      color: $darker-text-color;
+      font-weight: 500;
+      margin-bottom: 20px;
+    }
+
+    @media screen and (max-width: 600px) {
+      display: block;
+
+      h4 {
+        text-align: center;
+      }
+
+      &__column {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+
+      &__divider {
+        min-height: 0;
+        width: 100%;
+        border-left-width: 0;
+        border-top-width: 1px;
+      }
+    }
+
+    .layout-multiple-columns & {
+      display: block;
+
+      h4 {
+        text-align: center;
+      }
+
+      &__column {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+
+      &__divider {
+        min-height: 0;
+        width: 100%;
+        border-left-width: 0;
+        border-top-width: 1px;
+      }
+    }
+  }
+
+  &__mail {
+    color: $primary-text-color;
+    text-decoration: none;
+    font-weight: 500;
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: underline;
+    }
+  }
+
+  .link-footer {
+    padding: 0;
+    margin-top: 60px;
+    text-align: center;
+    font-size: 15px;
+    line-height: 22px;
+
+    @media screen and (min-width: $no-gap-breakpoint) {
+      display: none;
+    }
+  }
+
+  .account {
+    padding: 0;
+    border: 0;
+  }
+
+  .account__avatar-wrapper {
+    margin-left: 0;
+  }
+
+  .account__relationship {
+    display: none;
+  }
+
+  &__section {
+    margin-bottom: 10px;
+
+    &__title {
+      font-size: 17px;
+      font-weight: 600;
+      line-height: 22px;
+      padding: 20px;
+      border-radius: 4px;
+      background: lighten($ui-base-color, 4%);
+      color: $highlight-text-color;
+      cursor: pointer;
+    }
+
+    &.active &__title {
+      border-radius: 4px 4px 0 0;
+    }
+
+    &__body {
+      border: 1px solid lighten($ui-base-color, 4%);
+      border-top: 0;
+      padding: 20px;
+      font-size: 15px;
+      line-height: 22px;
+    }
+  }
+
+  &__domain-blocks {
+    margin-top: 30px;
+    width: 100%;
+    border-collapse: collapse;
+    break-inside: auto;
+
+    th {
+      text-align: left;
+      font-weight: 500;
+      color: $darker-text-color;
+    }
+
+    thead tr,
+    tbody tr {
+      border-bottom: 1px solid lighten($ui-base-color, 8%);
+    }
+
+    tbody tr:last-child {
+      border-bottom: 0;
+    }
+
+    th,
+    td {
+      padding: 8px;
+    }
+  }
+}
diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss
index 4e912b18b..00519adf1 100644
--- a/app/javascript/flavours/glitch/styles/components/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/components/accounts.scss
@@ -541,6 +541,7 @@
     &__buttons {
       display: flex;
       align-items: center;
+      gap: 8px;
       padding-top: 55px;
       overflow: hidden;
 
@@ -550,14 +551,6 @@
         box-sizing: content-box;
         padding: 2px;
       }
-
-      & > .icon-button {
-        margin-right: 8px;
-      }
-
-      .button {
-        margin: 0 8px;
-      }
     }
 
     &__name {
diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss
index 1440682f3..c61815e07 100644
--- a/app/javascript/flavours/glitch/styles/components/columns.scss
+++ b/app/javascript/flavours/glitch/styles/components/columns.scss
@@ -42,27 +42,62 @@
     &__main {
       box-sizing: border-box;
       width: 100%;
-      max-width: 600px;
       flex: 0 0 auto;
       display: flex;
       flex-direction: column;
 
       @media screen and (min-width: $no-gap-breakpoint) {
         padding: 0 10px;
+        max-width: 600px;
       }
     }
   }
 }
 
+$ui-header-height: 55px;
+
+.ui__header {
+  display: none;
+  box-sizing: border-box;
+  height: $ui-header-height;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  justify-content: space-between;
+  align-items: center;
+
+  &__logo {
+    display: inline-flex;
+    padding: 15px;
+
+    .logo {
+      height: $ui-header-height - 30px;
+      width: auto;
+    }
+  }
+
+  &__links {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 0 10px;
+
+    .button {
+      flex: 0 0 auto;
+    }
+  }
+}
+
 .tabs-bar__wrapper {
   background: darken($ui-base-color, 8%);
   position: sticky;
-  top: 0;
+  top: $ui-header-height;
   z-index: 2;
   padding-top: 0;
 
   @media screen and (min-width: $no-gap-breakpoint) {
     padding-top: 10px;
+    top: 0;
   }
 
   .tabs-bar {
@@ -117,6 +152,7 @@
   box-sizing: border-box;
   width: 100%;
   background: lighten($ui-base-color, 4%);
+  border-radius: 4px 4px 0 0;
   color: $highlight-text-color;
   cursor: pointer;
   flex: 0 0 auto;
@@ -178,6 +214,8 @@
   font-size: 16px;
   padding: 15px;
   text-decoration: none;
+  overflow: hidden;
+  white-space: nowrap;
 
   &:hover,
   &:focus,
@@ -204,6 +242,17 @@
       color: $highlight-text-color;
     }
   }
+
+  &--logo {
+    background: transparent;
+    padding: 10px;
+
+    &:hover,
+    &:focus,
+    &:active {
+      background: transparent;
+    }
+  }
 }
 
 .column-link__icon {
@@ -255,6 +304,7 @@
   display: flex;
   font-size: 16px;
   background: lighten($ui-base-color, 4%);
+  border-radius: 4px 4px 0 0;
   flex: 0 0 auto;
   cursor: pointer;
   position: relative;
@@ -309,6 +359,8 @@
 
   > .scrollable {
     background: $ui-base-color;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
   }
 }
 
@@ -352,6 +404,11 @@
   &:focus {
     text-shadow: 0 0 4px darken($ui-highlight-color, 5%);
   }
+
+  &:disabled {
+    color: $dark-text-color;
+    cursor: default;
+  }
 }
 
 .column-header__notif-cleaning-buttons {
@@ -570,7 +627,6 @@
 }
 
 .empty-column-indicator,
-.error-column,
 .follow_requests-unlocked_explanation {
   color: $dark-text-color;
   background: $ui-base-color;
@@ -607,7 +663,48 @@
 }
 
 .error-column {
+  padding: 20px;
+  background: $ui-base-color;
+  border-radius: 4px;
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  justify-content: center;
   flex-direction: column;
+  cursor: default;
+
+  &__image {
+    width: 70%;
+    max-width: 350px;
+    margin-top: -50px;
+  }
+
+  &__message {
+    text-align: center;
+    color: $darker-text-color;
+    font-size: 15px;
+    line-height: 22px;
+
+    h1 {
+      font-size: 28px;
+      line-height: 33px;
+      font-weight: 700;
+      margin-bottom: 15px;
+      color: $primary-text-color;
+    }
+
+    p {
+      max-width: 48ch;
+    }
+
+    &__actions {
+      margin-top: 30px;
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      justify-content: center;
+    }
+  }
 }
 
 // more fixes for the navbar-under mode
@@ -849,7 +946,7 @@
 
 .column-actions {
   display: flex;
-  align-items: start;
+  align-items: flex-start;
   justify-content: center;
   padding: 40px;
   padding-top: 40px;
@@ -881,3 +978,28 @@
     color: $darker-text-color;
   }
 }
+
+.dismissable-banner {
+  background: $ui-base-color;
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  display: flex;
+  align-items: center;
+  gap: 30px;
+
+  &__message {
+    flex: 1 1 auto;
+    padding: 20px 15px;
+    cursor: default;
+    font-size: 14px;
+    line-height: 18px;
+    color: $primary-text-color;
+  }
+
+  &__action {
+    padding: 15px;
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
diff --git a/app/javascript/flavours/glitch/styles/components/composer.scss b/app/javascript/flavours/glitch/styles/components/compose_form.scss
index 1468bd4f5..72d3aad1d 100644
--- a/app/javascript/flavours/glitch/styles/components/composer.scss
+++ b/app/javascript/flavours/glitch/styles/components/compose_form.scss
@@ -1,4 +1,4 @@
-.composer {
+.compose-form {
   padding: 10px;
 
   .emoji-picker-dropdown {
@@ -25,16 +25,16 @@
   }
 }
 
-.no-reduce-motion .composer--spoiler {
+.no-reduce-motion .spoiler-input {
   transition: height 0.4s ease, opacity 0.4s ease;
 }
 
-.composer--spoiler {
+.spoiler-input {
   height: 0;
   transform-origin: bottom;
   opacity: 0.0;
 
-  &.composer--spoiler--visible {
+  &.spoiler-input--visible {
     height: 36px;
     margin-bottom: 11px;
     opacity: 1.0;
@@ -64,7 +64,7 @@
   }
 }
 
-.composer--warning {
+.compose-form__warning {
   color: $inverted-text-color;
   margin-bottom: 15px;
   background: $ui-primary-color;
@@ -123,7 +123,7 @@
   }
 }
 
-.composer--reply {
+.reply-indicator {
   margin: 0 0 10px;
   border-radius: 4px;
   padding: 10px;
@@ -131,117 +131,117 @@
   min-height: 23px;
   overflow-y: auto;
   flex: 0 2 auto;
+}
 
-  & > header {
-    margin-bottom: 5px;
-    overflow: hidden;
+.reply-indicator__header {
+  margin-bottom: 5px;
+  overflow: hidden;
 
-    & > .account.small { color: $inverted-text-color; }
+  & > .account.small { color: $inverted-text-color; }
+}
 
-    & > .cancel {
-      float: right;
-      line-height: 24px;
-    }
-  }
+.reply-indicator__cancel {
+  float: right;
+  line-height: 24px;
+}
 
-  & > .content {
-    position: relative;
-    margin: 10px 0;
-    padding: 0 12px;
-    font-size: 14px;
-    line-height: 20px;
-    color: $inverted-text-color;
-    word-wrap: break-word;
-    font-weight: 400;
-    overflow: visible;
-    white-space: pre-wrap;
-    padding-top: 5px;
-    overflow: hidden;
+.reply-indicator__content {
+  position: relative;
+  margin: 10px 0;
+  padding: 0 12px;
+  font-size: 14px;
+  line-height: 20px;
+  color: $inverted-text-color;
+  word-wrap: break-word;
+  font-weight: 400;
+  overflow: visible;
+  white-space: pre-wrap;
+  padding-top: 5px;
+  overflow: hidden;
 
-    p, pre, blockquote {
-      margin-bottom: 20px;
-      white-space: pre-wrap;
+  p, pre, blockquote {
+    margin-bottom: 20px;
+    white-space: pre-wrap;
 
-      &:last-child {
-        margin-bottom: 0;
-      }
+    &:last-child {
+      margin-bottom: 0;
     }
+  }
 
-    h1, h2, h3, h4, h5 {
-      margin-top: 20px;
-      margin-bottom: 20px;
-    }
+  h1, h2, h3, h4, h5 {
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
 
-    h1, h2 {
-      font-weight: 700;
-      font-size: 18px;
-    }
+  h1, h2 {
+    font-weight: 700;
+    font-size: 18px;
+  }
 
-    h2 {
-      font-size: 16px;
-    }
+  h2 {
+    font-size: 16px;
+  }
 
-    h3, h4, h5 {
-      font-weight: 500;
-    }
+  h3, h4, h5 {
+    font-weight: 500;
+  }
 
-    blockquote {
-      padding-left: 10px;
-      border-left: 3px solid $inverted-text-color;
-      color: $inverted-text-color;
-      white-space: normal;
+  blockquote {
+    padding-left: 10px;
+    border-left: 3px solid $inverted-text-color;
+    color: $inverted-text-color;
+    white-space: normal;
 
-      p:last-child {
-        margin-bottom: 0;
-      }
+    p:last-child {
+      margin-bottom: 0;
     }
+  }
 
-    b, strong {
-      font-weight: 700;
-    }
+  b, strong {
+    font-weight: 700;
+  }
 
-    em, i {
-      font-style: italic;
-    }
+  em, i {
+    font-style: italic;
+  }
 
-    sub {
-      font-size: smaller;
-      vertical-align: sub;
-    }
+  sub {
+    font-size: smaller;
+    vertical-align: sub;
+  }
 
-    sup {
-      font-size: smaller;
-      vertical-align: super;
-    }
+  sup {
+    font-size: smaller;
+    vertical-align: super;
+  }
 
-    ul, ol {
-      margin-left: 1em;
+  ul, ol {
+    margin-left: 1em;
 
-      p {
-        margin: 0;
-      }
+    p {
+      margin: 0;
     }
+  }
 
-    ul {
-      list-style-type: disc;
-    }
+  ul {
+    list-style-type: disc;
+  }
 
-    ol {
-      list-style-type: decimal;
-    }
+  ol {
+    list-style-type: decimal;
+  }
 
-    a {
-      color: $lighter-text-color;
-      text-decoration: none;
+  a {
+    color: $lighter-text-color;
+    text-decoration: none;
 
-      &:hover { text-decoration: underline }
+    &:hover { text-decoration: underline }
 
-      &.mention {
-        &:hover {
-          text-decoration: none;
+    &.mention {
+      &:hover {
+        text-decoration: none;
 
-          span { text-decoration: underline }
-        }
+        span { text-decoration: underline }
       }
     }
   }
@@ -253,8 +253,12 @@
   }
 }
 
-.compose-form__autosuggest-wrapper,
-.autosuggest-input {
+.compose-form .compose-form__autosuggest-wrapper {
+  position: relative;
+}
+
+.compose-form .autosuggest-textarea,
+.compose-form .autosuggest-input {
   position: relative;
   width: 100%;
 
@@ -284,10 +288,6 @@
         all: unset;
       }
 
-      &:disabled {
-        background: $ui-secondary-color;
-      }
-
       &:focus {
         outline: 0;
       }
@@ -304,7 +304,7 @@
   }
 }
 
-.composer--textarea--icons {
+.compose-form__textarea-icons {
   display: block;
   position: absolute;
   top: 29px;
@@ -401,25 +401,25 @@
   }
 }
 
-.composer--upload_form {
+.compose-form__upload-wrapper {
   overflow: hidden;
+}
 
-  & > .content {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    font-family: inherit;
-    padding: 5px;
-    overflow: hidden;
-  }
+.compose-form__uploads-wrapper {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  font-family: inherit;
+  padding: 5px;
+  overflow: hidden;
 }
 
-.composer--upload_form--item {
+.compose-form__upload {
   flex: 1 1 0;
   margin: 5px;
   min-width: 40%;
 
-  & > div {
+  .compose-form__upload-thumbnail {
     position: relative;
     border-radius: 4px;
     height: 140px;
@@ -459,52 +459,52 @@
   }
 }
 
-.composer--upload_form--actions {
+.compose-form__upload__actions {
   background: linear-gradient(180deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
 }
 
-.composer--upload_form--progress {
+.upload-progress {
   display: flex;
   padding: 10px;
   color: $darker-text-color;
   overflow: hidden;
 
-  & > .fa {
+  .fa {
     font-size: 34px;
     margin-right: 10px;
   }
 
-  & > .message {
-    flex: 1 1 auto;
+  span {
+    display: block;
+    font-size: 12px;
+    font-weight: 500;
+    text-transform: uppercase;
+  }
+}
 
-    & > span {
-      display: block;
-      font-size: 12px;
-      font-weight: 500;
-      text-transform: uppercase;
-    }
+.upload-progress__message {
+  flex: 1 1 auto;
+}
 
-    & > .backdrop {
-      position: relative;
-      margin-top: 5px;
-      border-radius: 6px;
-      width: 100%;
-      height: 6px;
-      background: $ui-base-lighter-color;
-
-      & > .tracker {
-        position: absolute;
-        top: 0;
-        left: 0;
-        height: 6px;
-        border-radius: 6px;
-        background: $ui-highlight-color;
-      }
-    }
-  }
+.upload-progress__backdrop {
+  position: relative;
+  margin-top: 5px;
+  border-radius: 6px;
+  width: 100%;
+  height: 6px;
+  background: $ui-base-lighter-color;
+}
+
+.upload-progress__tracker {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 6px;
+  border-radius: 6px;
+  background: $ui-highlight-color;
 }
 
 .compose-form__modifiers {
@@ -514,7 +514,7 @@
   background: $simple-background-color;
 }
 
-.composer--options-wrapper {
+.compose-form__buttons-wrapper {
   padding: 10px;
   background: darken($simple-background-color, 8%);
   border-radius: 0 0 4px 4px;
@@ -524,11 +524,12 @@
   flex: 0 0 auto;
 }
 
-.composer--options {
+.compose-form__buttons {
   display: flex;
   flex: 0 0 auto;
 
-  & > * {
+  & .icon-button,
+  & .text-icon-button {
     display: inline-block;
     box-sizing: content-box;
     padding: 0 3px;
@@ -550,30 +551,41 @@
   }
 }
 
-.compose--counter-wrapper {
+.character-counter__wrapper {
   align-self: center;
   margin-right: 4px;
 }
 
-.composer--options--dropdown {
-  &.open {
-    & > .value {
-      border-radius: 4px 4px 0 0;
-      box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1);
-      color: $primary-text-color;
-      background: $ui-highlight-color;
+.privacy-dropdown.active {
+  .privacy-dropdown__value {
+    background: $simple-background-color;
+    border-radius: 4px 4px 0 0;
+    box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1);
+
+    .icon-button {
       transition: none;
     }
-    &.top {
-      & > .value {
-        border-radius: 0 0 4px 4px;
-        box-shadow: 0 4px 4px rgba($base-shadow-color, 0.1);
+
+    &.active {
+      background: $ui-highlight-color;
+
+      .icon-button {
+        color: $primary-text-color;
       }
     }
   }
+
+  &.top .privacy-dropdown__value {
+    border-radius: 0 0 4px 4px;
+  }
+
+  .privacy-dropdown__dropdown {
+    display: block;
+    box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1);
+  }
 }
 
-.composer--options--dropdown--content {
+.privacy-dropdown__dropdown {
   position: absolute;
   border-radius: 4px;
   box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
@@ -582,14 +594,14 @@
   transform-origin: 50% 0;
 }
 
-.composer--options--dropdown--content--item {
+.privacy-dropdown__option {
   display: flex;
   align-items: center;
   padding: 10px;
   color: $inverted-text-color;
   cursor: pointer;
 
-  & > .content {
+  .privacy-dropdown__option__content {
     flex: 1 1 auto;
     color: $lighter-text-color;
 
@@ -607,7 +619,7 @@
     background: $ui-highlight-color;
     color: $primary-text-color;
 
-    & > .content {
+    .privacy-dropdown__option__content {
       color: $primary-text-color;
 
       strong { color: $primary-text-color }
@@ -617,31 +629,25 @@
   &.active:hover { background: lighten($ui-highlight-color, 4%) }
 }
 
-.composer--publisher {
-  padding-top: 10px;
-  text-align: right;
-  white-space: nowrap;
-  overflow: hidden;
+.compose-form__publish {
+  display: flex;
   justify-content: flex-end;
+  min-width: 0;
   flex: 0 0 auto;
+  column-gap: 5px;
 
-  & > .primary {
-    display: inline-block;
-    margin: 0;
-    padding: 7px 10px;
-    text-align: center;
-  }
+  .compose-form__publish-button-wrapper {
+    overflow: hidden;
+    padding-top: 10px;
 
-  & > .side_arm {
-    display: inline-block;
-    margin: 0 5px;
-    padding: 7px 0;
-    width: 36px;
-    text-align: center;
-  }
+    button {
+      padding: 7px 10px;
+      text-align: center;
+    }
 
-  &.over {
-    & > .count { color: $warning-red }
+    & > .side_arm {
+      width: 36px;
+    }
   }
 }
 
diff --git a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss
index 0089445e1..790650cfa 100644
--- a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss
+++ b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss
@@ -111,7 +111,7 @@
   position: relative;
 
   input {
-    font-size: 14px;
+    font-size: 16px;
     font-weight: 400;
     padding: 7px 9px;
     padding-right: 25px;
@@ -132,6 +132,10 @@
     &:active {
       outline: 0 !important;
     }
+
+    &::-webkit-search-cancel-button {
+      display: none;
+    }
   }
 }
 
diff --git a/app/javascript/flavours/glitch/styles/components/explore.scss b/app/javascript/flavours/glitch/styles/components/explore.scss
new file mode 100644
index 000000000..bad77fc1c
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles/components/explore.scss
@@ -0,0 +1,115 @@
+.account-card__header {
+  position: relative;
+}
+
+.explore__search-header {
+  background: darken($ui-base-color, 4%);
+  justify-content: center;
+  align-items: center;
+  padding: 15px;
+
+  .search {
+    width: 100%;
+    margin-bottom: 0;
+  }
+
+  .search__input {
+    border: 1px solid lighten($ui-base-color, 8%);
+    padding: 10px;
+  }
+
+  .search .fa {
+    top: 10px;
+    right: 10px;
+    color: $dark-text-color;
+  }
+
+  .search .fa-times-circle {
+    top: 12px;
+  }
+}
+
+.explore__search-results {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.story {
+  display: flex;
+  align-items: center;
+  color: $primary-text-color;
+  text-decoration: none;
+  padding: 15px 0;
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
+
+  &:last-child {
+    border-bottom: 0;
+  }
+
+  &:hover,
+  &:active,
+  &:focus {
+    background-color: lighten($ui-base-color, 4%);
+  }
+
+  &__details {
+    padding: 0 15px;
+    flex: 1 1 auto;
+
+    &__publisher {
+      color: $darker-text-color;
+      margin-bottom: 4px;
+    }
+
+    &__title {
+      font-size: 19px;
+      line-height: 24px;
+      font-weight: 500;
+      margin-bottom: 4px;
+    }
+
+    &__shared {
+      color: $darker-text-color;
+    }
+  }
+
+  &__thumbnail {
+    flex: 0 0 auto;
+    margin: 0 15px;
+    position: relative;
+    width: 120px;
+    height: 120px;
+
+    .skeleton {
+      width: 100%;
+      height: 100%;
+    }
+
+    img {
+      border-radius: 4px;
+      display: block;
+      margin: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    &__preview {
+      border-radius: 4px;
+      display: block;
+      margin: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: fill;
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 0;
+
+      &--hidden {
+        display: none;
+      }
+    }
+  }
+}
diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss
index b54c3f696..b00038afd 100644
--- a/app/javascript/flavours/glitch/styles/components/index.scss
+++ b/app/javascript/flavours/glitch/styles/components/index.scss
@@ -20,6 +20,11 @@
   background: transparent;
   padding: 0;
   cursor: pointer;
+  text-decoration: none;
+
+  &--destructive {
+    color: $error-value-color;
+  }
 
   &:hover,
   &:active {
@@ -110,6 +115,27 @@
     &:hover {
       border-color: lighten($ui-primary-color, 4%);
       color: lighten($darker-text-color, 4%);
+      text-decoration: none;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+    }
+  }
+
+  &.button-tertiary {
+    background: transparent;
+    padding: 6px 17px;
+    color: $highlight-text-color;
+    border: 1px solid $highlight-text-color;
+
+    &:active,
+    &:focus,
+    &:hover {
+      background: $ui-highlight-color;
+      color: $primary-text-color;
+      border: 0;
+      padding: 7px 18px;
     }
 
     &:disabled {
@@ -168,6 +194,15 @@
     color: $highlight-text-color;
   }
 
+  &.copyable {
+    transition: background 300ms linear;
+  }
+
+  &.copied {
+    background: $valid-value-color;
+    transition: none;
+  }
+
   &::-moz-focus-inner {
     border: 0;
   }
@@ -222,11 +257,12 @@
     display: inline-flex;
     align-items: center;
     width: auto !important;
+    padding: 0 4px 0 2px;
   }
 
   &__counter {
     display: inline-block;
-    width: 14px;
+    width: auto;
     margin-left: 4px;
     font-size: 12px;
     font-weight: 500;
@@ -863,6 +899,10 @@
     position: relative;
     min-height: 120px;
   }
+
+  .scrollable {
+    flex: 1 1 auto;
+  }
 }
 
 .scrollable.fullscreen {
@@ -1004,43 +1044,6 @@
     color: $dark-text-color;
   }
 
-  &__footer {
-    flex: 0 0 auto;
-    padding: 10px;
-    padding-top: 20px;
-    z-index: 1;
-
-    ul {
-      margin-bottom: 10px;
-    }
-
-    ul li {
-      display: inline;
-    }
-
-    p {
-      color: $dark-text-color;
-      font-size: 13px;
-      margin-bottom: 20px;
-
-      a {
-        color: $dark-text-color;
-        text-decoration: underline;
-      }
-    }
-
-    a {
-      text-decoration: none;
-      color: $darker-text-color;
-
-      &:hover,
-      &:focus,
-      &:active {
-        text-decoration: underline;
-      }
-    }
-  }
-
   &__trends {
     flex: 0 1 auto;
     opacity: 1;
@@ -1735,7 +1738,7 @@ noscript {
 @import 'domains';
 @import 'status';
 @import 'modal';
-@import 'composer';
+@import 'compose_form';
 @import 'columns';
 @import 'regeneration_indicator';
 @import 'directory';
@@ -1751,3 +1754,7 @@ noscript {
 @import 'error_boundary';
 @import 'single_column';
 @import 'announcements';
+@import 'explore';
+@import 'signed_out';
+@import 'privacy_policy';
+@import 'about';
diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss
index e95bea0d7..ab8609170 100644
--- a/app/javascript/flavours/glitch/styles/components/modal.scss
+++ b/app/javascript/flavours/glitch/styles/components/modal.scss
@@ -23,6 +23,7 @@
   left: 0;
   width: 100%;
   height: 100%;
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -415,7 +416,6 @@
 }
 
 .boost-modal,
-.favourite-modal,
 .confirmation-modal,
 .report-modal,
 .actions-modal,
@@ -460,7 +460,7 @@
   }
 }
 
-.favourite-modal .status-direct {
+.boost-modal .status-direct {
   background-color: inherit;
 }
 
@@ -477,8 +477,7 @@
   }
 }
 
-.boost-modal__container,
-.favourite-modal__container {
+.boost-modal__container {
   overflow-x: scroll;
   padding: 10px;
 
@@ -489,7 +488,6 @@
 }
 
 .boost-modal__action-bar,
-.favourite-modal__action-bar,
 .confirmation-modal__action-bar,
 .mute-modal__action-bar,
 .block-modal__action-bar {
@@ -511,13 +509,11 @@
   }
 }
 
-.boost-modal__status-header,
-.favourite-modal__status-header {
+.boost-modal__status-header {
   font-size: 15px;
 }
 
-.boost-modal__status-time,
-.favourite-modal__status-time {
+.boost-modal__status-time {
   float: right;
   font-size: 14px;
 }
@@ -1289,11 +1285,11 @@
   }
 }
 
-.modal-root__container .composer--options--dropdown {
+.modal-root__container .privacy-dropdown {
   flex-grow: 0;
 }
 
-.modal-root__container .composer--options--dropdown--content {
+.modal-root__container .privacy-dropdown__dropdown {
   pointer-events: auto;
   z-index: 9999;
 }
@@ -1304,3 +1300,123 @@ img.modal-warning {
   margin-bottom: 15px;
   width: 60px;
 }
+
+.interaction-modal {
+  max-width: 90vw;
+  width: 600px;
+  background: $ui-base-color;
+  border-radius: 8px;
+  overflow: hidden;
+  position: relative;
+  display: block;
+  padding: 20px;
+
+  h3 {
+    font-size: 22px;
+    line-height: 33px;
+    font-weight: 700;
+    text-align: center;
+  }
+
+  &__icon {
+    color: $highlight-text-color;
+    margin: 0 5px;
+  }
+
+  &__lead {
+    padding: 20px;
+    text-align: center;
+
+    h3 {
+      margin-bottom: 15px;
+    }
+
+    p {
+      font-size: 17px;
+      line-height: 22px;
+      color: $darker-text-color;
+    }
+  }
+
+  &__choices {
+    display: flex;
+
+    &__choice {
+      flex: 0 0 auto;
+      width: 50%;
+      box-sizing: border-box;
+      padding: 20px;
+
+      h3 {
+        margin-bottom: 20px;
+      }
+
+      p {
+        color: $darker-text-color;
+        margin-bottom: 20px;
+      }
+
+      .button {
+        margin-bottom: 10px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+
+  @media screen and (max-width: $no-gap-breakpoint - 1px) {
+    &__choices {
+      display: block;
+
+      &__choice {
+        width: auto;
+        margin-bottom: 20px;
+      }
+    }
+  }
+}
+
+.copypaste {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+
+  input {
+    display: block;
+    font-family: inherit;
+    background: darken($ui-base-color, 8%);
+    border: 1px solid $highlight-text-color;
+    color: $darker-text-color;
+    border-radius: 4px;
+    padding: 6px 9px;
+    line-height: 22px;
+    font-size: 14px;
+    transition: border-color 300ms linear;
+    flex: 1 1 auto;
+    overflow: hidden;
+
+    &:focus {
+      outline: 0;
+      background: darken($ui-base-color, 4%);
+    }
+  }
+
+  .button {
+    flex: 0 0 auto;
+    transition: background 300ms linear;
+  }
+
+  &.copied {
+    input {
+      border: 1px solid $valid-value-color;
+      transition: none;
+    }
+
+    .button {
+      background: $valid-value-color;
+      transition: none;
+    }
+  }
+}
diff --git a/app/javascript/flavours/glitch/styles/components/privacy_policy.scss b/app/javascript/flavours/glitch/styles/components/privacy_policy.scss
new file mode 100644
index 000000000..96cf06742
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles/components/privacy_policy.scss
@@ -0,0 +1,207 @@
+.privacy-policy {
+  background: $ui-base-color;
+  padding: 20px;
+
+  @media screen and (min-width: $no-gap-breakpoint) {
+    border-radius: 4px;
+  }
+
+  &__body {
+    margin-top: 20px;
+  }
+}
+
+.prose {
+  color: $secondary-text-color;
+  font-size: 15px;
+  line-height: 22px;
+
+  p,
+  ul,
+  ol {
+    margin-top: 1.25em;
+    margin-bottom: 1.25em;
+  }
+
+  img {
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
+
+  video {
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
+
+  figure {
+    margin-top: 2em;
+    margin-bottom: 2em;
+
+    figcaption {
+      font-size: 0.875em;
+      line-height: 1.4285714;
+      margin-top: 0.8571429em;
+    }
+  }
+
+  figure > * {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  h1 {
+    font-size: 1.5em;
+    margin-top: 0;
+    margin-bottom: 1em;
+    line-height: 1.33;
+  }
+
+  h2 {
+    font-size: 1.25em;
+    margin-top: 1.6em;
+    margin-bottom: 0.6em;
+    line-height: 1.6;
+  }
+
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-top: 1.5em;
+    margin-bottom: 0.5em;
+    line-height: 1.5;
+  }
+
+  ol {
+    counter-reset: list-counter;
+  }
+
+  li {
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+  }
+
+  ol > li {
+    counter-increment: list-counter;
+
+    &::before {
+      content: counter(list-counter) ".";
+      position: absolute;
+      left: 0;
+    }
+  }
+
+  ul > li::before {
+    content: "";
+    position: absolute;
+    background-color: $darker-text-color;
+    border-radius: 50%;
+    width: 0.375em;
+    height: 0.375em;
+    top: 0.5em;
+    left: 0.25em;
+  }
+
+  ul > li,
+  ol > li {
+    position: relative;
+    padding-left: 1.75em;
+  }
+
+  & > ul > li p {
+    margin-top: 0.75em;
+    margin-bottom: 0.75em;
+  }
+
+  & > ul > li > *:first-child {
+    margin-top: 1.25em;
+  }
+
+  & > ul > li > *:last-child {
+    margin-bottom: 1.25em;
+  }
+
+  & > ol > li > *:first-child {
+    margin-top: 1.25em;
+  }
+
+  & > ol > li > *:last-child {
+    margin-bottom: 1.25em;
+  }
+
+  ul ul,
+  ul ol,
+  ol ul,
+  ol ol {
+    margin-top: 0.75em;
+    margin-bottom: 0.75em;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  strong,
+  b {
+    color: $primary-text-color;
+    font-weight: 700;
+  }
+
+  em,
+  i {
+    font-style: italic;
+  }
+
+  a {
+    color: $highlight-text-color;
+    text-decoration: underline;
+
+    &:focus,
+    &:hover,
+    &:active {
+      text-decoration: none;
+    }
+  }
+
+  code {
+    font-size: 0.875em;
+    background: darken($ui-base-color, 8%);
+    border-radius: 4px;
+    padding: 0.2em 0.3em;
+  }
+
+  hr {
+    border: 0;
+    border-top: 1px solid lighten($ui-base-color, 4%);
+    margin-top: 3em;
+    margin-bottom: 3em;
+  }
+
+  hr + * {
+    margin-top: 0;
+  }
+
+  h2 + * {
+    margin-top: 0;
+  }
+
+  h3 + * {
+    margin-top: 0;
+  }
+
+  h4 + *,
+  h5 + *,
+  h6 + * {
+    margin-top: 0;
+  }
+
+  & > :first-child {
+    margin-top: 0;
+  }
+
+  & > :last-child {
+    margin-bottom: 0;
+  }
+}
diff --git a/app/javascript/flavours/glitch/styles/components/search.scss b/app/javascript/flavours/glitch/styles/components/search.scss
index 17a34db62..70af0f651 100644
--- a/app/javascript/flavours/glitch/styles/components/search.scss
+++ b/app/javascript/flavours/glitch/styles/components/search.scss
@@ -28,10 +28,6 @@
   &:focus {
     background: lighten($ui-base-color, 4%);
   }
-
-  @media screen and (max-width: 600px) {
-    font-size: 16px;
-  }
 }
 
 .search__icon {
@@ -132,6 +128,7 @@
     align-items: center;
     padding: 15px;
     border-bottom: 1px solid lighten($ui-base-color, 8%);
+    gap: 15px;
 
     &:last-child {
       border-bottom: 0;
@@ -173,16 +170,8 @@
       font-size: 24px;
       font-weight: 500;
       text-align: right;
-      padding-right: 15px;
-      margin-left: 5px;
       color: $secondary-text-color;
       text-decoration: none;
-
-      &__asterisk {
-        color: $darker-text-color;
-        font-size: 18px;
-        vertical-align: super;
-      }
     }
 
     &__sparkline {
@@ -191,7 +180,7 @@
 
       path:first-child {
         fill: rgba($highlight-text-color, 0.25) !important;
-        fill-opacity: 1 !important;
+        fill-opacity: 100% !important;
       }
 
       path:last-child {
diff --git a/app/javascript/flavours/glitch/styles/components/signed_out.scss b/app/javascript/flavours/glitch/styles/components/signed_out.scss
new file mode 100644
index 000000000..efb49305d
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles/components/signed_out.scss
@@ -0,0 +1,110 @@
+.sign-in-banner {
+  padding: 10px;
+
+  p {
+    color: $darker-text-color;
+    margin-bottom: 20px;
+
+    a {
+      color: $secondary-text-color;
+      text-decoration: none;
+      unicode-bidi: isolate;
+
+      &:hover {
+        text-decoration: underline;
+
+        .fa {
+          color: lighten($dark-text-color, 7%);
+        }
+      }
+    }
+  }
+
+  .button {
+    margin-bottom: 10px;
+  }
+}
+
+.server-banner {
+  padding: 20px 0;
+
+  &__introduction {
+    color: $darker-text-color;
+    margin-bottom: 20px;
+
+    strong {
+      font-weight: 600;
+    }
+
+    a {
+      color: inherit;
+      text-decoration: underline;
+
+      &:hover,
+      &:active,
+      &:focus {
+        text-decoration: none;
+      }
+    }
+  }
+
+  &__hero {
+    display: block;
+    border-radius: 4px;
+    width: 100%;
+    height: auto;
+    margin-bottom: 20px;
+    aspect-ratio: 1.9;
+    border: 0;
+    background: $ui-base-color;
+    object-fit: cover;
+  }
+
+  &__description {
+    margin-bottom: 20px;
+  }
+
+  &__meta {
+    display: flex;
+    gap: 10px;
+    max-width: 100%;
+
+    &__column {
+      flex: 0 0 auto;
+      width: calc(50% - 5px);
+      overflow: hidden;
+    }
+  }
+
+  &__number {
+    font-weight: 600;
+    color: $primary-text-color;
+    font-size: 14px;
+  }
+
+  &__number-label {
+    color: $darker-text-color;
+    font-weight: 500;
+    font-size: 14px;
+  }
+
+  h4 {
+    text-transform: uppercase;
+    color: $darker-text-color;
+    margin-bottom: 10px;
+    font-weight: 600;
+  }
+
+  .account {
+    padding: 0;
+    border: 0;
+  }
+
+  .account__avatar-wrapper {
+    margin-left: 0;
+  }
+
+  .spacer {
+    margin: 10px 0;
+  }
+}
diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss
index 3843bcd68..d91306151 100644
--- a/app/javascript/flavours/glitch/styles/components/single_column.scss
+++ b/app/javascript/flavours/glitch/styles/components/single_column.scss
@@ -6,6 +6,26 @@
   height: calc(100% - 10px);
   overflow-y: hidden;
 
+  .hero-widget {
+    box-shadow: none;
+
+    &__text,
+    &__img,
+    &__img img {
+      border-radius: 0;
+    }
+
+    &__text {
+      padding: 15px;
+      color: $secondary-text-color;
+
+      strong {
+        font-weight: 700;
+        color: $primary-text-color;
+      }
+    }
+  }
+
   .search__input {
     line-height: 18px;
     font-size: 16px;
@@ -21,11 +41,7 @@
     flex: 0 1 48px;
   }
 
-  .flex-spacer {
-    background: transparent;
-  }
-
-  .composer {
+  .compose-form {
     flex: 1;
     overflow-y: hidden;
     display: flex;
@@ -43,10 +59,6 @@
   .autosuggest-textarea__textarea {
     overflow-y: hidden;
   }
-
-  .compose-form__upload-thumbnail {
-    height: 80px;
-  }
 }
 
 .navigation-panel {
@@ -61,6 +73,14 @@
     flex: 0 0 auto;
   }
 
+  .logo {
+    height: 30px;
+    width: auto;
+  }
+}
+
+.navigation-panel,
+.compose-panel {
   hr {
     flex: 0 0 auto;
     border: 0;
@@ -130,97 +150,71 @@
     padding-top: 0;
   }
 
-  @media screen and (min-width: 630px) {
-    .detailed-status {
-      padding: 15px;
+  .detailed-status {
+    padding: 15px;
 
-      .media-gallery,
-      .video-player,
-      .audio-player {
-        margin-top: 15px;
-      }
+    .media-gallery,
+    .video-player,
+    .audio-player {
+      margin-top: 15px;
     }
+  }
 
-    .account__header__bar {
-      padding: 5px 10px;
-    }
+  .account__header__bar {
+    padding: 5px 10px;
+  }
 
-    .navigation-bar,
-    .compose-form {
-      padding: 15px;
-    }
+  .navigation-bar,
+  .compose-form {
+    padding: 15px;
+  }
 
-    .compose-form .compose-form__publish .compose-form__publish-button-wrapper {
-      padding-top: 15px;
-    }
+  .compose-form .compose-form__publish .compose-form__publish-button-wrapper {
+    padding-top: 15px;
+  }
 
-    .notification__report {
-      padding: 15px 15px 15px (48px + 15px * 2);
-      min-height: 48px + 2px;
+  .notification__report {
+    padding: 15px 15px 15px (48px + 15px * 2);
+    min-height: 48px + 2px;
 
-      &__avatar {
-        left: 15px;
-        top: 17px;
-      }
+    &__avatar {
+      left: 15px;
+      top: 17px;
     }
+  }
 
-    .status {
-      padding: 15px;
-      min-height: 48px + 2px;
+  .status {
+    padding: 15px;
+    min-height: 48px + 2px;
 
-      .media-gallery,
-      &__action-bar,
-      .video-player,
-      .audio-player {
-        margin-top: 10px;
-      }
+    .media-gallery,
+    &__action-bar,
+    .video-player,
+    .audio-player {
+      margin-top: 10px;
     }
+  }
 
-    .account {
-      padding: 15px 10px;
+  .account {
+    padding: 15px 10px;
 
-      &__header__bio {
-        margin: 0 -10px;
-      }
+    &__header__bio {
+      margin: 0 -10px;
     }
+  }
 
-    .notification {
-      &__message {
-        padding-top: 15px;
-      }
-
-      .status {
-        padding-top: 8px;
-      }
+  .notification {
+    &__message {
+      padding-top: 15px;
+    }
 
-      .account {
-        padding-top: 8px;
-      }
+    .status {
+      padding-top: 8px;
     }
-  }
-}
 
-.floating-action-button {
-  position: fixed;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 3.9375rem;
-  height: 3.9375rem;
-  bottom: 1.3125rem;
-  right: 1.3125rem;
-  background: darken($ui-highlight-color, 2%);
-  color: $white;
-  border-radius: 50%;
-  font-size: 21px;
-  line-height: 21px;
-  text-decoration: none;
-  box-shadow: 2px 3px 9px rgba($base-shadow-color, 0.4);
-
-  &:hover,
-  &:focus,
-  &:active {
-    background: $ui-highlight-color;
+    .account {
+      padding-top: 8px;
+    }
   }
 }
 
@@ -237,37 +231,104 @@
   .search {
     margin-bottom: 10px;
   }
-}
 
-@media screen and (max-width: 600px + (285px * 1) + (10px * 1)) {
-  .columns-area__panels__pane--compositional {
+  .tabs-bar__link.optional {
     display: none;
   }
 
-  .with-fab .scrollable .item-list:last-child {
-    padding-bottom: 5.25rem;
+  .search-page .search {
+    display: none;
   }
-}
 
-@media screen and (min-width: 600px + (285px * 1) + (10px * 1)) {
-  .floating-action-button,
-  .tabs-bar__link.optional {
+  .navigation-panel__legal {
     display: none;
   }
+}
 
-  .search-page .search {
-    display: none;
+@media screen and (max-width: $no-gap-breakpoint - 1px) {
+  $sidebar-width: 285px;
+
+  .columns-area__panels__main {
+    width: calc(100% - $sidebar-width);
+  }
+
+  .columns-area__panels {
+    min-height: calc(100vh - $ui-header-height);
+  }
+
+  .columns-area__panels__pane--navigational {
+    min-width: $sidebar-width;
+
+    .columns-area__panels__pane__inner {
+      width: $sidebar-width;
+    }
+
+    .navigation-panel {
+      margin: 0;
+      background: $ui-base-color;
+      border-left: 1px solid lighten($ui-base-color, 8%);
+      height: 100vh;
+    }
+
+    .navigation-panel__sign-in-banner,
+    .navigation-panel__logo,
+    .getting-started__trends {
+      display: none;
+    }
+
+    .column-link__icon {
+      font-size: 18px;
+    }
+  }
+
+  .ui__header {
+    display: flex;
+    background: $ui-base-color;
+    border-bottom: 1px solid lighten($ui-base-color, 8%);
+  }
+
+  .column-header,
+  .column-back-button,
+  .scrollable,
+  .error-column {
+    border-radius: 0 !important;
   }
 }
 
-@media screen and (max-width: 600px + (285px * 2) + (10px * 2)) {
+@media screen and (max-width: $no-gap-breakpoint - 285px - 1px) {
+  $sidebar-width: 55px;
+
+  .columns-area__panels__main {
+    width: calc(100% - $sidebar-width);
+  }
+
   .columns-area__panels__pane--navigational {
-    display: none;
+    min-width: $sidebar-width;
+
+    .columns-area__panels__pane__inner {
+      width: $sidebar-width;
+    }
+
+    .column-link span {
+      display: none;
+    }
+
+    .list-panel {
+      display: none;
+    }
   }
 }
 
-@media screen and (min-width: 600px + (285px * 2) + (10px * 2)) {
-  .tabs-bar {
+.explore__search-header {
+  display: none;
+}
+
+@media screen and (max-width: $no-gap-breakpoint - 1px) {
+  .columns-area__panels__pane--compositional {
     display: none;
   }
+
+  .explore__search-header {
+    display: flex;
+  }
 }
diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss
index 9511e0c61..5e4bddc67 100644
--- a/app/javascript/flavours/glitch/styles/components/status.scss
+++ b/app/javascript/flavours/glitch/styles/components/status.scss
@@ -559,12 +559,10 @@
 }
 
 .status__prepend {
-  margin-top: -10px;
-  margin-bottom: 10px;
+  margin-top: -2px;
+  margin-bottom: 8px;
   margin-left: 58px;
   color: $dark-text-color;
-  padding: 8px 0;
-  padding-bottom: 2px;
   font-size: 14px;
   position: relative;
 
@@ -669,6 +667,7 @@
   display: inline-block;
   font-weight: 500;
   font-size: 12px;
+  line-height: 17px;
   margin-left: 6px;
 }