From 5636a5db8bc5e8da290f5ddd6533023b7e8690e6 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Tue, 7 May 2024 18:33:32 -0300
Subject: [PATCH] Fixes skeleton compatibility with container queries in
 masonry and records view modes.

---
 src/views/admin/scss/_view-mode-masonry.scss | 71 ++++++++++++++------
 src/views/admin/scss/_view-mode-records.scss | 60 +++++++++++------
 2 files changed, 90 insertions(+), 41 deletions(-)

diff --git a/src/views/admin/scss/_view-mode-masonry.scss b/src/views/admin/scss/_view-mode-masonry.scss
index 1a551891d..c3a5e8855 100644
--- a/src/views/admin/scss/_view-mode-masonry.scss
+++ b/src/views/admin/scss/_view-mode-masonry.scss
@@ -1,6 +1,15 @@
-.theme-items-list .tainacan-masonry-container,
-.items-list-area .tainacan-masonry-container {
-    min-height: 50vh;
+.theme-items-list,
+.items-list-area {
+    .tainacan-masonry-container,
+    .tainacan-masonry-container--skeleton {
+        min-height: 50vh;
+    }
+}
+.table-wrapper {
+    @supports (contain: inline-size) {
+        container-type: inline-size;
+        container-name: tablewrapper; 
+    }
 }
 .tainacan-masonry-container {
     list-style: none;
@@ -14,10 +23,6 @@
     list-style: none;
     animation-name: appear;   
     animation-duration: 0.5s;
-
-    @supports (contain: inline-size) {
-        container-type: inline-size; 
-    }
     
     &:not(.tainacan-masonry-container--legacy){
         &>li,
@@ -25,25 +30,25 @@
             list-style-type: none;
             width: calc(12.5% - 25px);
             
-            @container (max-width: 2380px) {
+            @container tablewrapper (max-width: 2380px) {
                 width: calc(14.285% - 25px);
             }
-            @container (max-width: 1980px) {
+            @container tablewrapper (max-width: 1980px) {
                 width: calc(16.666% - 25px);
             }
-            @container (max-width: 1480px) {
+            @container tablewrapper (max-width: 1480px) {
                 width: calc(20% - 25px);
             }
-            @container (max-width: 1240px) {
+            @container tablewrapper (max-width: 1240px) {
                 width: calc(25% - 25px);
             }
-            @container (max-width: 940px) {
+            @container tablewrapper (max-width: 940px) {
                 width: calc(33.333% - 25px);
             }
-            @container (max-width: 720px) {
+            @container tablewrapper (max-width: 720px) {
                 width: calc(50% - 25px);
             }
-            @container (max-width: 380px) {
+            @container tablewrapper (max-width: 380px) {
                 width: calc(100% - 25px);
             }
 
@@ -231,7 +236,6 @@
 }
 .tainacan-masonry-container--skeleton {
     display: block;
-    min-height: 50vh;
     padding-left: 25px;
     padding-right: 25px;
     column-gap: 25px;
@@ -246,27 +250,50 @@
     &:not(.tainacan-masonry-container--legacy) {
         column-count: 8;
 
-        @media screen and (max-width: 2380px) {
+        @container tablewrapper (max-width: 2380px) {
             column-count: 7;
         }
-        @media screen and (max-width: 1980px) {
+        @container tablewrapper (max-width: 1980px) {
             column-count: 6;
         }
-        @media screen and (max-width: 1480px) {
+        @container tablewrapper (max-width: 1480px) {
             column-count: 5;
         }
-        @media screen and (max-width: 1240px) {
+        @container tablewrapper (max-width: 1240px) {
             column-count: 4;
         }
-        @media screen and (max-width: 940px) {
+        @container tablewrapper (max-width: 940px) {
             column-count: 3;
         }
-        @media screen and (max-width: 720px) {
+        @container tablewrapper (max-width: 720px) {
             column-count: 2;
         }
-        @media screen and (max-width: 380px) {
+        @container tablewrapper (max-width: 380px) {
             column-count: 1;
         }
+
+        @supports not (contain: inline-size) {
+            column-count: 7;
+
+            @media screen and (max-width: 2560px) {
+                column-count: 6;
+            }
+            @media screen and (max-width: 1920px) {
+                column-count: 5;
+            }
+            @media screen and (max-width: 1740px) {
+                column-count: 4;
+            }
+            @media screen and (max-width: 1440px) {
+                column-count: 3;
+            }
+            @media screen and (max-width: 1024px) {
+                column-count: 2;
+            }
+            @media screen and (max-width: 620px) {
+                column-count: 1;
+            }
+        }
     }
     &.tainacan-masonry-container--legacy {
         column-count: 7;
diff --git a/src/views/admin/scss/_view-mode-records.scss b/src/views/admin/scss/_view-mode-records.scss
index 8b53c114e..6d58fcfb1 100644
--- a/src/views/admin/scss/_view-mode-records.scss
+++ b/src/views/admin/scss/_view-mode-records.scss
@@ -1,6 +1,15 @@
-.theme-items-list .tainacan-records-container,
-.items-list-area .tainacan-records-container {
-    min-height: 50vh;
+.theme-items-list,
+.items-list-area {
+    .tainacan-records-container--skeleton,
+    .tainacan-records-container {
+        min-height: 50vh;
+    }
+}
+.table-wrapper {
+    @supports (contain: inline-size) {
+        container-type: inline-size;
+        container-name: tablewrapper; 
+    }
 }
 .tainacan-records-container {
     list-style: none;
@@ -14,27 +23,23 @@
     animation-name: appear;
     animation-duration: 0.5s;
 
-    @supports (contain: inline-size) {
-        container-type: inline-size; 
-    }
-
     &>li,
     .tainacan-records-grid-sizer {
         width: calc(16.666% - 30px);
 
-        @container (max-width: 2560px) {
+        @container tablewrapper (max-width: 2560px) {
             width: calc(20% - 30px);
         }
-        @container (max-width: 1920px) {
+        @container tablewrapper (max-width: 1920px) {
             width: calc(25% - 30px);
         }
-        @container (max-width: 1320px) {
+        @container tablewrapper (max-width: 1320px) {
             width: calc(33.333% - 30px);
         }
-        @container (max-width: 1000px) {
+        @container tablewrapper (max-width: 1000px) {
             width: calc(50% - 30px);
         }
-        @container (max-width: 740px) {
+        @container tablewrapper (max-width: 740px) {
             width: 100%;
         }
 
@@ -240,34 +245,51 @@
 }
 .tainacan-records-container--skeleton {
     display: block;
-    min-height: 50vh;
     padding-left: 30px;
     padding-right: 30px;
     column-gap: 30px;
     height: auto !important;
-    column-count: 6;
 
     .skeleton {
         width: 100%;
         margin-bottom: 30px;
         break-inside: avoid;
     }
+        
+    column-count: 6;
 
-    @media screen and (max-width: 2560px) {
+    @container tablewrapper (max-width: 2560px) {
         column-count: 5;
     }
-    @media screen and (max-width: 1920px) {
+    @container tablewrapper (max-width: 1920px) {
         column-count: 4;
     }
-    @media screen and (max-width: 1320px) {
+    @container tablewrapper (max-width: 1320px) {
         column-count: 3;
     }
-    @media screen and (max-width: 1000px) {
+    @container tablewrapper (max-width: 1000px) {
         column-count: 2;
     }
-    @media screen and (max-width: 748px) {
+    @container tablewrapper (max-width: 740px) {
         column-count: 1;
     }
+
+    @supports not (contain: inline-size) {
+        column-count: 5;
+
+        @media screen and (max-width: 2560px) {
+            column-count: 4;
+        }
+        @media screen and (max-width: 1920px) {
+            column-count: 3;
+        }
+        @media screen and (max-width: 1360px) {
+            column-count: 2;
+        }
+        @media screen and (max-width: 1024px) {
+            column-count: 1;
+        }
+    }
 }