[FIX] image&download block overflow

main/static/main/css/styles.css

@@ -3801,6 +3801,14 @@ div.twitter-carousel .slick-arrow.slick-disabled:before, div.twitter-carousel .s
   overflow: auto;
 }
 
+.overflow-hidden{
+  overflow: hidden;
+}
+
+.text-ellipsis{
+  text-overflow: ellipsis;
+}
+
 .rounded-full{
   border-radius: 9999px;
 }

main/styleguide/source/_patterns/molecules/blocks/block-download.mustache

@@ -2,10 +2,10 @@
   <div class="flex justify-start xl:justify-end grid-left-side">
     <i class="ico--download p-2 text-3xl md:text-4xl xl:text-7xl xl:mr-12"></i>
   </div>
-  <div class="grid-content flex items-center flex-wrap gap-3">
-    <div class="flex items-center bg-white h-11 p-1 mr-3">
+  <div class="grid-content flex items-center flex-wrap gap-3 overflow-hidden">
+    <div class="flex items-center bg-white h-11 p-1 mr-3 overflow-hidden">
       <span class="font-bold mr-1">Stáhnout soubor: </span>
-      <span>prehled-tabulka.pdf</span>
+      <span class="overflow-hidden text-ellipsis">prehledasdfasndfjansdjkfnkjasndkjfajsdnfkjtabulka.pdf</span>
     </div>
     {{> atoms-button-animated(btn-text: "Stáhnout", classes: "h-11 p-0") }}
   </div>

main/styleguide/source/_patterns/molecules/blocks/block-image.mustache

 <div class="grid-container px-3 py-3 mb-4 bg-grey-150 xl:py-0 xl:mb-20">
-  <div class="grid-content-with-right-side flex flex-wrap gap-3 xl:gap-5">
+  <div class="grid-content-with-right-side flex flex-wrap gap-3 xl:gap-5 overflow-hidden">
     <img src="https://i.picsum.photos/id/547/480/300.jpg?hmac=Y7cmYUqM4jIvrQzzO8VTM0oiedlqvSPOzXH_iRSK87w" alt="" class="w-full max-w-sm">
-    <div class="flex flex-col justify-between">
+    <div class="flex flex-col justify-between overflow-hidden">
       <a href="" class="mt-4 xl:mt-8 mb-2 font-bold hover:no-underline leading-5">
         Et harum quidem rerum facilis est et expedita distinctio.
       </a>
-      <span class="text-sm text-grey-200 uppercase mb-4 xl:mb-6">zdroj: www.internet.cz</span>
+      <span class="text-sm text-grey-200 uppercase mb-4 xl:mb-6 overflow-hidden text-ellipsis">zdroj: www.internet.cz</span>
     </div>
   </div>
 </div>

main/templates/main/blocks/article_download_block.html

@@ -2,10 +2,10 @@
   <div class="flex justify-start xl:justify-end grid-left-side">
     <i class="ico--download p-2 text-3xl md:text-4xl xl:text-7xl xl:mr-12"></i>
   </div>
-  <div class="grid-content flex items-center flex-wrap gap-3">
-    <div class="flex items-center bg-white h-11 p-1 mr-3">
+  <div class="grid-content flex items-center flex-wrap gap-3 overflow-hidden">
+    <div class="flex items-center bg-white h-11 p-1 mr-3 overflow-hidden">
       <span class="font-bold mr-1">Stáhnout soubor: </span>
-      <span>{{ self.file }}</span>
+      <span class="overflow-hidden text-ellipsis">{{ self.file }}</span>
     </div>
     <a href="{{ self.file.url }}" class="btn btn__slide__wrap h-11 p-0" download>
       <span class="btn text-lg bg-black text-white w-32 lg:text-base">Stáhnout</span>

main/templates/main/blocks/article_image_block.html

 {% load wagtailimages_tags %}
 
 <div class="grid-container px-3 py-3 mb-4 bg-grey-150 xl:py-0 xl:mb-20">
-    <div class="grid-content-with-right-side flex flex-wrap gap-3 xl:gap-5">
+    <div class="grid-content-with-right-side flex flex-wrap gap-3 xl:gap-5 overflow-hidden">
         {% image self.image max-500x500 as image %}
         <img src="{{ image.url }}"
              alt="" class="w-full max-w-sm">
-        <div class="flex flex-col justify-between">
+        <div class="flex flex-col justify-between overflow-hidden">
             <a href="{{ self.href }}" class="mt-4 xl:mt-8 mb-2 font-bold hover:no-underline leading-5">
                 {{ self.text }}
             </a>
-            <span class="text-sm text-grey-200 uppercase mb-4 xl:mb-6">zdroj: {{ self.href }}</span>
+            <span class="text-sm text-grey-200 uppercase mb-4 xl:mb-6 overflow-hidden text-ellipsis">zdroj: {{ self.href }}</span>
         </div>
     </div>
 </div>