From 5ee8e49bc48397c6beab987c612ba564015833c5 Mon Sep 17 00:00:00 2001
From: rimu <3310831+rimu@users.noreply.github.com>
Date: Mon, 23 Dec 2024 12:26:28 +1300
Subject: [PATCH] popup user profile - big screens only (phones have no hover)

---
 app/static/styles.css  | 34 ++++++++++++++++++----------------
 app/static/styles.scss | 31 +++++++++++++++++--------------
 2 files changed, 35 insertions(+), 30 deletions(-)

diff --git a/app/static/styles.css b/app/static/styles.css
index fa59a100..91d6b8cd 100644
--- a/app/static/styles.css
+++ b/app/static/styles.css
@@ -1965,22 +1965,24 @@ form h5 {
 .render_username .author_link {
   display: inline-block;
 }
-.render_username .author_link:hover + .user_preview, .render_username .user_preview:hover {
-  display: inline-block !important;
-  position: absolute;
-  top: 17px;
-  left: 0;
-  background-color: white;
-  z-index: 20;
-}
-.render_username .user_preview .card {
-  width: 300px;
-}
-.render_username .user_preview .card .preview_avatar_image {
-  max-width: 50%;
-}
-.render_username .user_preview .card .preview_avatar_image img {
-  max-width: 100%;
+@media (min-width: 1280px) {
+  .render_username .author_link:hover + .user_preview, .render_username .user_preview:hover {
+    display: inline-block !important;
+    position: absolute;
+    top: 17px;
+    left: 0;
+    background-color: white;
+    z-index: 20;
+  }
+  .render_username .user_preview .card {
+    width: 300px;
+  }
+  .render_username .user_preview .card .preview_avatar_image {
+    max-width: 50%;
+  }
+  .render_username .user_preview .card .preview_avatar_image img {
+    max-width: 100%;
+  }
 }
 
 /* high contrast */
diff --git a/app/static/styles.scss b/app/static/styles.scss
index a3487b1b..f2fa6014 100644
--- a/app/static/styles.scss
+++ b/app/static/styles.scss
@@ -1682,26 +1682,29 @@ form {
     display: inline-block;
   }
 
-  .author_link:hover + .user_preview, .user_preview:hover {
-    display: inline-block !important;
-    position: absolute;
-    top: 17px;
-    left: 0;
-    background-color: white;
-    z-index: 20;
-  }
+  @include breakpoint(laptop) {
+    .author_link:hover + .user_preview, .user_preview:hover {
+      display: inline-block !important;
+      position: absolute;
+      top: 17px;
+      left: 0;
+      background-color: white;
+      z-index: 20;
+    }
 
-  .user_preview .card {
-    width: 300px;
+    .user_preview .card {
+      width: 300px;
 
-    .preview_avatar_image {
-      max-width: 50%;
+      .preview_avatar_image {
+        max-width: 50%;
 
-      img {
-        max-width: 100%;
+        img {
+          max-width: 100%;
+        }
       }
     }
   }
+
 }
 
 /* high contrast */