Moved wine image above winner name in dagens viner.

src/components/RegisterPage.vue

@@ -29,8 +29,11 @@
         <hr />
         <div class="winnner-container-inner">
           <div class="input-container">
+            <div class="wine-image">
+              <img :src="winner.wine.image" />
+            </div>
             <div class="label-div">
-              <input type="text" v-model="winner.name" placeholder="Navn" />
+              <input type="text" v-model="winner.name" placeholder="Navn vinner" />
             </div>
             <div class="label-div">
               <div class="color-selector">
@@ -72,12 +75,8 @@
               />
             </div>
           </div>
-          <div class="wine-image">
-            <img :src="winner.wine.image" />
         </div>
       </div>
-        <hr />
-      </div>
     </div>
     <div class="button-container">
       <button @click="addWine">Legg til en vin</button>
@@ -329,6 +328,7 @@ hr {
 .color-selector {
   .active {
     border: 2px solid black;
+    margin-bottom: 1rem;
   }
 
   button {
@@ -337,7 +337,6 @@ hr {
     padding: 10px 30px;
     margin: 0;
     font-size: 1.3rem;
-    height: calc(3rem + 18px);
     display: inline-flex;
     flex-wrap: wrap;
     flex-direction: row;
@@ -347,6 +346,10 @@ hr {
     // disable-dbl-tap-zoom
     touch-action: manipulation;
 
+    @include mobile {
+      margin: 2px;
+    }
+
     &.green {
       background: #c8f9df;
     }&.blue {
@@ -360,6 +363,8 @@ hr {
 }
 
 .color-selected {
+  margin-bottom: 2rem;
+
   @include mobile {
     display: block;
     width: 100%;