From 99f4f14c473ebe8ee0607ac02954f2d9d47483f4 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.
---
 css/style.css | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/css/style.css b/css/style.css
index 5abad3b16..30b78cf0c 100644
--- a/css/style.css
+++ b/css/style.css
@@ -402,19 +402,21 @@ a[href="javascript:;"] {
   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 {
@@ -443,15 +445,23 @@ a[href="javascript:;"] {
   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;
 }
 
 /* Announcement Hiding */