Update the profile view

The items are now arranged in columns properly, and the exit
button has its own space.

src/components/Explore.vue

@@ -4,11 +4,13 @@
       <div class="explore-log-filler"></div>
     </div>
     <div class="explore-worldinfo">
-      <button @click="$emit('profile')">Show profile</button>
       <p class="worldinfo-date">{{ world.time.format("MMMM Do Y") }}</p>
       <p class="worldinfo-date">{{ world.time.format("hh:mm:ss a") }}</p>
     </div>
-    <Statblock :subject="world.player" :initiative="0" />
+    <div class="explore-statblock">
+      <Statblock :subject="world.player" :initiative="0" />
+      <button @click="$emit('profile')">Show profile</button>
+    </div>
     <div class="explore-containers">
       <transition-group name="container">
         <ContainerView v-show="container.contents.concat(container.digested).length > 0" :container="container" v-for="(container, index) in world.player.containers" :key="'explore-container-' + index" />
@@ -146,6 +148,10 @@ export default class Explore extends Vue {
   font-size: 1.25rem;
 }
 
+.explore-statblock {
+  grid-area: statblock;
+}
+
 .explore-info {
   grid-area: info;
   background: #333;

src/components/Profile.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="character-layout">
+    <button @click="$emit('exit')" class="profile-exit">Exit</button>
     <div class="character-items">
-      <button @click="$emit('exit')" class="profile-exit">Exit</button>
       <ItemView :item="item" v-for="(item, index) in world.player.items" :key="'item-' + index" />
     </div>
     <div class="character-containers">
@@ -41,31 +41,27 @@ export default class Explore extends Vue {
   position: relative;
   display: grid;
   grid-template-areas:
+  "exit      void"
   "items     stats"
   "containers     containers";
-  grid-template-rows: 1fr 0.25fr;
+  grid-template-rows: 100px 1fr 0.25fr;
   grid-template-columns: 1fr 1fr;
   width: 100%;
   height: 100%;
   max-width: 1500px;
   margin: auto;
-  overflow: hidden;
 }
 
 .character-items {
   background: #222;
   grid-area: items;
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(100, 1fr);
+  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
+  grid-template-rows: repeat(10, 1fr);
   justify-items: center;
   align-items: start;
-}
-
-@media (max-width: 800px) {
-  .character-items {
-    grid-template-columns: repeat(2, 1fr);
-  }
+  overflow-x: hidden;
+  overflow-y: scroll;
 }
 
 .character-items > .item-view {
@@ -89,8 +85,24 @@ export default class Explore extends Vue {
 }
 
 .profile-exit {
-  position: absolute;
-  top: 0;
-  left: 0;
+  grid-area: exit;
+  width: 100%;
+  padding: 4pt;
+  flex: 0 1;
+  background: #333;
+  border-color: #666;
+  border-style: outset;
+  user-select: none;
+  color: #eee;
+  font-size: 36px;
+}
+
+.profile-exit:hover {
+  background: #444;
+}
+
+.profile-exit:active {
+  background: #666;
+  border-style: inset;
 }
 </style>