Style tweaks

src/routes/_layout.svelte

@@ -1,3 +1,10 @@
 <main>
 	<slot></slot>
 </main>
+
+<style>
+	main {
+		position: relative;
+		height: 100%;
+	}
+</style>

src/routes/room.svelte

@@ -85,6 +85,8 @@
 
 <list>
     {#if room}
+        <div class="page-wrapper">
+            <div>
                 <div class="exit"><a href={process.env.URL}>Вернуться на главную</a></div>
                 <h1>{room.name}</h1>
                 <p class="subtext">По {room.group == "true" ? "бригадам" : "вариантам"}</p>
@@ -100,19 +102,21 @@
                             </span>
                         {/each}
                         {#if room.teams[i].length == 0 || room.group == "true"}
-                    <input class="addName" type="button" value="+" on:click={() => selectVar(i)}>
+                            <img src="/plus.svg" alt="plus" class="addName" on:click={() => selectVar(i)} />
                             <input class="nameInput" type="text" bind:value={nameInput[i]} on:keyup={(event) => selectVar(i, event)}>
                         {/if}
                     </li>
                 {/each}
                 </ol>
+            </div>
 
-        <span class="footer">
+            <div class="footer">
                 Код подключения: <code>{parsed.id}</code>
                 <a href="https://github.com/anatolykopyl/variants">
                     <img src="/github.png" alt="github" class="githubLink">
                 </a>
-        </span>
+            </div>
+        </div>
     {:else if res==undefined}
         <div class="status">Загрузка...</div>
     {:else if res.status==404}
@@ -125,11 +129,22 @@
 </list>
 
 <style>
+    list {
+        position: relative;
+    }
+
     h1 {
         font-weight: 100;
         margin-bottom: 0px;
     }
 
+    .page-wrapper {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+
     .exit {
         height: 0px;
         width: 100%;
@@ -191,6 +206,7 @@
         width: 1.2em;
         height: 1.2em;
         border-radius: 100%;
+        color: black;
         background-color: yellowgreen;
         border: none;
         padding: 0px;

static/global.css

@@ -1,4 +1,4 @@
-html, body {
+html, body, #sapper {
 	position: relative;
 	width: 100%;
 	height: 100%;
@@ -71,9 +71,7 @@ button:focus {
 .footer {
     text-align: center;
     font-size: small;
-    position: fixed;
+    position: relative;
-    left: 0;
-    bottom: 0;
     width: 100%;
     padding-bottom: 10px;
 }

static/plus.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
+  <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
+</svg>