Merge branch 'develop' into 'icon_picker_admin_config'

# Conflicts:
#   package.json

app/soapbox/components/__tests__/__snapshots__/display_name-test.js.snap

@@ -4,16 +4,22 @@ exports[`<DisplayName /> renders display name + account name 1`] = `
 <span
   className="display-name"
 >
-  <bdi>
-    <strong
-      className="display-name__html"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "<p>Foo</p>",
+  <span
+    className="hover-ref-wrapper"
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+  >
+    <bdi>
+      <strong
+        className="display-name__html"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "<p>Foo</p>",
+          }
         }
-      }
-    />
-  </bdi>
+      />
+    </bdi>
+  </span>
   <span
     className="display-name__account"
   >

app/styles/application.scss

@@ -27,7 +27,6 @@
 @import 'dyslexic';
 @import 'demetricator';
 @import 'pro';
-@import 'overflow_hacks';
 @import 'chats';
 
 // COMPONENTS

app/styles/chats.scss

@@ -322,7 +322,6 @@
   display: flex;
   align-items: center;
   background: var(--accent-color--faint);
-  border-radius: 10px 10px 0 0;
 
   .column-back-button {
     background: transparent;

app/styles/components/columns.scss

@@ -212,7 +212,6 @@
   font-size: 16px;
   line-height: inherit;
   border: 0;
-  border-radius: 10px 10px 0 0;
   text-align: unset;
   padding: 15px;
   margin: 0;

app/styles/components/detailed-status.scss

@@ -62,7 +62,6 @@
   border-bottom: 1px solid var(--brand-color--faint);
   display: flex;
   flex-direction: row;
-  border-radius: 0 0 10px 10px;
 }
 
 .detailed-status__link {

app/styles/components/drawer.scss

@@ -20,7 +20,7 @@
 .column,
 .drawer {
   flex: 1 1 100%;
-  overflow: visible;
+  overflow: hidden;
 }
 
 .drawer__pager {

app/styles/components/profile_hover_card.scss

@@ -15,19 +15,14 @@
   transition-duration: 0.2s;
   width: 320px;
   z-index: 200;
-  left: -10px;
-  padding: 20px;
-  margin-bottom: 10px;
+  top: 0;
+  left: 0;
 
   &--visible {
     opacity: 1;
     pointer-events: all;
   }
 
-  @media(min-width: 750px) {
-    left: -100px;
-  }
-
   .profile-hover-card__container {
     @include standard-panel;
     position: relative;
@@ -114,18 +109,12 @@
 .detailed-status {
   .profile-hover-card {
     top: 0;
-    left: 60px;
+    left: 0;
   }
 }
 
-/* Prevent floating avatars from intercepting with current card */
-.status,
-.detailed-status {
-  .floating-link {
-    display: none;
-  }
-
-  &:hover .floating-link {
-    display: block;
-  }
+/* Hide the popper when the reference is hidden */
+#popper[data-popper-reference-hidden] {
+  visibility: hidden;
+  pointer-events: none;
 }

app/styles/loading.scss

@@ -188,7 +188,6 @@
   align-items: center;
   justify-content: center;
   padding: 20px;
-  border-radius: 0 0 10px 10px;
 
   & > div {
     width: 100%;

app/styles/overflow_hacks.scss

@@ -1,37 +0,0 @@
-// This is a file dedicated to fixing the css we broke by introducing the hover
-// card and `overflow:visible` on drawer.scss line 23. If we ever figure out how
-// to pop the hover card out while keeping `overflow:hidden`, feel free to delete
-// this entire file.
-
-button.column-header__button.active {
-  border-radius: 0 10px 0 0;
-}
-
-.column-back-button.column-back-button--slim-button {
-  border-radius: 0 10px 0 0;
-}
-
-.detailed-status__wrapper .detailed-status__action-bar {
-  border-radius: 0 0 10px 10px;
-}
-
-.slist .item-list .column-link {
-  background-color: transparent;
-  border-top: 1px solid var(--brand-color--med);
-}
-
-.focusable {
-  &:focus {
-    border-radius: 0 0 10px 10px;
-  }
-}
-
-.load-more:hover {
-  border-radius: 0 0 10px 10px;
-}
-
-// this still looks like shit but at least it's better than it overflowing
-
-.empty-column-indicator {
-  border-radius: 0 0 10px 10px;
-}

package.json

@@ -47,6 +47,7 @@
     "@babel/runtime": "^7.3.4",
     "@clusterws/cws": "^0.16.0",
     "@fonticonpicker/react-fonticonpicker": "^1.2.0",
+    "@popperjs/core": "^2.4.4",
     "array-includes": "^3.0.3",
     "autoprefixer": "^9.5.1",
     "axios": "^0.19.0",
@@ -115,6 +116,7 @@
     "react-motion": "^0.5.2",
     "react-notification": "^6.8.4",
     "react-overlays": "^0.8.3",
+    "react-popper": "^2.2.3",
     "react-redux": "^7.2.1",
     "react-redux-loading-bar": "^4.5.0",
     "react-router-dom": "^4.1.1",

yarn.lock

@@ -1494,6 +1494,11 @@
     "@types/yargs" "^15.0.0"
     chalk "^4.0.0"
 
+"@popperjs/core@^2.4.4":
+  version "2.4.4"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.4.4.tgz#11d5db19bd178936ec89cd84519c4de439574398"
+  integrity sha512-1oO6+dN5kdIA3sKPZhRGJTfGVP4SWV6KqlMOwry4J3HfyD68sl/3KmG7DeYUzvN+RbhXDnv/D8vNNB8168tAMg==
+
 "@sinonjs/commons@^1.7.0":
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.0.tgz#c8d68821a854c555bba172f3b06959a0039b236d"
@@ -9495,6 +9500,11 @@ react-fast-compare@^2.0.4:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
+react-fast-compare@^3.0.1:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
+  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
+
 react-helmet@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.0.0.tgz#fcb93ebaca3ba562a686eb2f1f9d46093d83b5f8"
@@ -9622,6 +9632,14 @@ react-overlays@^0.8.3:
     react-transition-group "^2.2.0"
     warning "^3.0.0"
 
+react-popper@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.2.3.tgz#33d425fa6975d4bd54d9acd64897a89d904b9d97"
+  integrity sha512-mOEiMNT1249js0jJvkrOjyHsGvqcJd3aGW/agkiMoZk3bZ1fXN1wQszIQSjHIai48fE67+zwF8Cs+C4fWqlfjw==
+  dependencies:
+    react-fast-compare "^3.0.1"
+    warning "^4.0.2"
+
 react-redux-loading-bar@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/react-redux-loading-bar/-/react-redux-loading-bar-4.5.0.tgz#96538d0ba041463d810e213fb54eadbce9628266"
@@ -11883,6 +11901,13 @@ warning@^4.0.1:
   dependencies:
     loose-envify "^1.0.0"
 
+warning@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
 watchpack@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"