From 1c3f3e56962591cb25ba54e7e427cd27b6fffd87 Mon Sep 17 00:00:00 2001
From: Seth Falco <seth@falco.fun>
Date: Sun, 9 Jul 2023 12:25:03 +0100
Subject: [PATCH] fix: make code blocks match height

---
 libretranslate/static/css/main.css  | 11 +++++++++++
 libretranslate/templates/index.html |  6 +++---
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/libretranslate/static/css/main.css b/libretranslate/static/css/main.css
index 1d5ac64..8712dd5 100644
--- a/libretranslate/static/css/main.css
+++ b/libretranslate/static/css/main.css
@@ -381,6 +381,16 @@ select {
   border: 0;
 }
 
+.code-row-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.code-box {
+  display: flex;
+  flex-direction: column;
+}
+
 .code {
   font-size: 90%;
   padding: 1rem 1.5rem;
@@ -391,6 +401,7 @@ select {
   min-height: 280px;
   width: 100%;
   overflow: auto;
+  flex-grow: 1;
 }
 
 code[class*="language-"], pre[class*="language-"] {
diff --git a/libretranslate/templates/index.html b/libretranslate/templates/index.html
index 3fec7e1..aec896d 100644
--- a/libretranslate/templates/index.html
+++ b/libretranslate/templates/index.html
@@ -287,13 +287,13 @@
 				<div class="row center">
 					<div class="col s12 m12">
 
-					<div class="row center">
-						<div class="col s12 m12 l6 left-align">
+					<div class="row center code-row-wrapper">
+						<div class="col s12 m12 l6 left-align code-box">
 							<p class="mb-0">{{ _h("Request") }}</p>
 							<pre class="code mt-0"><code class="language-javascript" v-html="$options.filters.highlight(requestCode)">
 							</code></pre>
 						</div>
-						<div class="col s12 m12 l6 left-align">
+						<div class="col s12 m12 l6 left-align code-box">
 							<p class="mb-0">{{ _h("Response") }}</p>
 							<pre class="code mt-0"><code class="language-javascript" v-html="$options.filters.highlight(output)">
 							</code></pre>