diff --git a/client/views/public.ejs b/client/views/public.ejs
index ea706fedc8d12352eda019c5352709f92c0292aa..e286ec42dd56167f30a3a6eec2747d0a7522814c 100644
--- a/client/views/public.ejs
+++ b/client/views/public.ejs
@@ -5,30 +5,37 @@
<title>Lektor App</title>
<link rel="stylesheet" href="/bootstrap-4.5.2-dist/css/bootstrap.min.css" type="text/css">
</head>
- <body>
- <div class="container-fluid">
- <div class="card text-center">
- <h2>
- Public interface
- </h2>
- <% karas.forEach(function(kara){ %>
- <div class="card border border-primary rounded" style="border-width: 5px; margin-bottom: 10px; margin-top: 10px;">
- <div class="card-header">
- <h3>
- <%- kara.source_name + " - " + kara.song_type + " - " + kara.song_name %>
- </h3>
+ <body style="overflow: hidden; height: 100vh;">
+ <div class="container-fluid" style="display: flex; flex-direction: column; height: 100%;">
+ <div class="row" style="flex-grow: 1; min-height: 15vh;">
+ <div class="card text-center">
+ <h2>
+ Public interface
+ </h2>
+ </div>
+ </div>
+ <div class="row" style="flex-grow: 5; overflow: hidden; flex-basis: auto;">
+ <div class="col" style="overflow-y: scroll; height: 100%;">
+ <% karas.forEach(function(kara){ %>
+ <div class="card shadow" style="border-radius: 25px; margin-bottom: 10px; margin-top: 10px;">
+ <div class="card-header" style="border-radius: 25px 25px 0 0;">
+ <h3>
+ <%- kara.source_name + " - " + kara.song_type + " - " + kara.song_name %>
+ </h3>
- </div>
- <div class="card-body">
- <h3>
- <%- kara.author_name %><br/>
- <%- kara.language %><br/>
- <%- kara.category %><br/>
- </h3>
+ </div>
+ <div class="card-body">
+ <h3>
+ <%- kara.author_name %><br/>
+ <%- kara.language %><br/>
+ <%- kara.category %><br/>
+ </h3>
- </div>
</div>
- <% }); %>
+ </div>
+ <% }); %>
+ </div>
+
</div>
</div>
</body>