Fix glitching gutter and link target

g0v · May 8, 2024 · c7edf47 · c7edf47
1 parent 535d4b0
commit c7edf47
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/src/pcss/base.pcss b/src/pcss/base.pcss
@@ -82,7 +82,7 @@ a:not(.btn, .nav-link) {
   opacity: 0;
   pointer-events: none;
   > .inner-modal {
-    @apply  flex flex-col bg-white min-w-80 max-w-lg;
+    @apply flex flex-col bg-white min-w-80 max-w-lg;
     max-height: 100%;
     transition: all 0.3s ease;
     transform: translateY(20px);
@@ -158,3 +158,8 @@ a:not(.btn, .nav-link) {
     }
   }
 }
+
+/* Prevent modal dialogs from stuttering page */
+:root:has(#modal) {
+  scrollbar-gutter: stable;
+}
diff --git a/src/pug/staff/index.pug b/src/pug/staff/index.pug
@@ -35,7 +35,7 @@ block main
             - let clickable = !!(person?.website || person?.bio)
             - let alt = (person?.name) ? (person.name.zh || '') + (person.name.zh === person.name.en ? '' : ' ' + person.name.en) : person_id
             .staff.flex.flex-col.items-center.justify-center(id=person_id, data-id=person_id)
-              a.w-full.flex.items-center.justify-center.aspect-square.bg-slate-100.rounded-full(href=(clickable ? (person.bio ? `staff/#${person_id}` : person.website) : null), rel="external")
+              a.w-full.flex.items-center.justify-center.aspect-square.bg-slate-100.rounded-full(href=((!person.website && !person.bio) ? null : (person.bio ? `staff/#${person_id}` : person.website)), rel="external", target=((person.website && !person.bio) ? "_blank" : null))
                 if person && person.avatar
                   img.w-full.rounded-full(src=person.avatar, alt=alt)
                 else