From 8a0becd7bf373e94fcca2a5bbac1bc5b18a9205e Mon Sep 17 00:00:00 2001
From: Mayhem <stepien.nicolas@gmail.com>
Date: Sun, 2 Feb 2014 22:38:53 +0100
Subject: [PATCH] Make the catalog flexbox-based.

The new, identical layout allows us to add overflowing elements in threads.
Previously, all overflowing content would be cut off.
Now, only the comment can be cut off.
---
 src/General/css/style.css | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/General/css/style.css b/src/General/css/style.css
index 6deda6559..6f5499a57 100755
--- a/src/General/css/style.css
+++ b/src/General/css/style.css
@@ -498,19 +498,21 @@ hr ~ div.center:not(.ad-cnt) {
   text-decoration: none;
 }
 .catalog-mode {
-  text-align: center;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 .catalog-thread {
-  display: inline-block;
-  vertical-align: top;
-  padding-top: 5px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   width: 165px;
+  margin-bottom: 5px;
   max-height: 320px;
-  overflow: hidden;
   word-break: break-word;
 }
 .catalog-thread > a {
-  display: inline-block;
+  flex-shrink: 0;
   position: relative;
 }
 .thumb {
@@ -539,15 +541,23 @@ hr ~ div.center:not(.ad-cnt) {
   right: 1px;
 }
 .thread-stats {
+  flex-shrink: 0;
   cursor: help;
   font-size: 10px;
   font-weight: 700;
   line-height: .8;
   margin-top: 1px;
-  float: none;
 }
 .catalog-thread .subject {
+  flex-shrink: 0;
   font-weight: 700;
+  line-height: 1;
+  text-align: center;
+}
+.catalog-thread > .comment {
+  flex-shrink: 1;
+  overflow: hidden;
+  text-align: center;
 }
 .catalog-thread .comment br + br {
   display: none;