From 86a6b0325959539b7b9570db081cc81acf64b963 Mon Sep 17 00:00:00 2001
From: CheariX <CheariX@users.noreply.github.com>
Date: Sun, 28 Apr 2024 17:33:55 +0000
Subject: [PATCH] Fix bib preview mobile (#2359)

[Reference](https://github.com/alshedivat/al-folio/pull/2352#issuecomment-2067965077)

I'm not sure if the removal of `max-width: 90vw;` for all images causes
any side issues.
I could at least not find any. But having this properties will produce
unaligned preview sizes.
Help/testing is more than welcome.


# Before
<img width="364" alt="Bildschirmfoto 2024-04-21 um 14 17 51"
src="https://github.com/alshedivat/al-folio/assets/1998723/5ad1a4d7-dfe6-43f8-98ec-eae19dd991c2">

# After

<img width="364" alt="Bildschirmfoto 2024-04-21 um 14 21 53"
src="https://github.com/alshedivat/al-folio/assets/1998723/fb942403-a01f-42ec-95c6-697378ed0d92">
...
<img width="364" alt="Bildschirmfoto 2024-04-21 um 14 22 03"
src="https://github.com/alshedivat/al-folio/assets/1998723/1ddf43d8-98a8-421d-9f64-3352190c4bb8">
---
 _layouts/bib.liquid |  6 +++---
 _sass/_base.scss    | 11 -----------
 2 files changed, 3 insertions(+), 14 deletions(-)

diff --git a/_layouts/bib.liquid b/_layouts/bib.liquid
index 96ddff0..82aeb45 100644
--- a/_layouts/bib.liquid
+++ b/_layouts/bib.liquid
@@ -2,7 +2,7 @@
 ---
 <div class="row">
   {% if site.enable_publication_thumbnails %}
-    <div class="col-sm-2 abbr">
+    <div class="col col-sm-2 abbr">
       {%- if entry.abbr -%}
         {%- if site.data.venues[entry.abbr] -%}
           {% assign venue_style = null %}
@@ -10,7 +10,7 @@
             {% assign venue_style = site.data.venues[entry.abbr].color | prepend: 'style="background-color:' | append: '"' %}
           {%- endif -%}
           <abbr
-            class="badge rounded"
+            class="badge rounded w-100"
             {% if venue_style %}
               {{ venue_style }}
             {% endif -%}
@@ -22,7 +22,7 @@
             {% endif %}
           </abbr>
         {% else %}
-          <abbr class="badge rounded">{{ entry.abbr }}</abbr>
+          <abbr class="badge rounded w-100">{{ entry.abbr }}</abbr>
         {% endif %}
       {% endif %}
       {% if entry.preview %}
diff --git a/_sass/_base.scss b/_sass/_base.scss
index de3037d..f35fe9f 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -55,11 +55,6 @@ table.table a {
   }
 }
 
-figure,
-img {
-  max-width: 90vw;
-}
-
 blockquote {
   background: var(--global-bg-color);
   border-left: 5px solid var(--global-theme-color);
@@ -665,7 +660,6 @@ footer.sticky-bottom {
     border-top: 1px solid var(--global-divider-color);
     padding-top: 1rem;
     margin-top: 2rem;
-    margin-bottom: -2rem;
     text-align: right;
   }
 
@@ -678,20 +672,15 @@ footer.sticky-bottom {
       margin-bottom: 1rem;
 
       .preview {
-        width: 100%;
-        min-width: 80px;
-        max-width: 200px;
       }
 
       .abbr {
-        height: 2rem;
         margin-bottom: 0.5rem;
 
         abbr {
           display: inline-block;
           background-color: var(--global-theme-color);
           margin-bottom: 0.5rem;
-          width: 100%;
 
           a {
             color: white;