Unhide completions, strengthen shadows a bit, force the 0.1 shade to always span the full height, make usercard use correct borders.

4 files changed, 12 insertions, 19 deletions

diff --git a/src/App.scss b/src/App.scss
index 5a117f04..e1b2d09b 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -127,7 +127,7 @@ main-router {
     margin: 0.5em;
 
     border-radius: 10px;
-    box-shadow: 1px 1px 3px rgba(0,0,0,.5);
+    box-shadow: 1px 1px 4px rgba(0,0,0,.6);
     overflow: hidden;
 }
 
@@ -160,8 +160,8 @@ main-router {
 
 #content {
     margin: auto;
+    min-height: 100vh;
     max-width: 980px;
-    border-radius: 10px;
     padding-bottom: 1em;
     background-color: rgba(0,0,0,0.1);
 }
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index aa3fc987..5e3df8ba 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -39,7 +39,7 @@
           </a>
         </div>
         <div class="media-body">
-          <div class="base05 base05=border usercard" v-if="userExpanded">
+          <div class="base03-border usercard" v-if="userExpanded">
             <user-card-content :user="status.user" :switcher="false"></user-card-content>
           </div>
           <div class="user-content">
@@ -244,7 +244,7 @@
          max-height: 400px;
          overflow-y: auto;
          overflow-x: hidden;
-         
+
          img, video {
            max-width: 100%;
            max-height: 400px;
@@ -383,14 +383,6 @@
    margin-left: auto;
  }
 
- .usercard {
-   border-style: solid;
-   border-width: 1px;
-   border-radius: 10px;
-   margin-bottom: 1em;
-   margin-top: 0.2em;
- }
-
  .reply-left {
    flex: 0;
    min-width: 48px;
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index a9b8b602..ba315faa 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="card base00-background base03-border">
+  <div class="card base00-background">
     <a href="#">
       <img @click.prevent="toggleUserExpanded" class="avatar" :src="user.profile_image_url">
     </a>
-    <div class="base05 base05=border usercard" v-if="userExpanded">
+    <div class="usercard" v-if="userExpanded">
       <user-card-content :user="user" :switcher="false"></user-card-content>
     </div>
     <div class="name-and-screen-name" v-else>
@@ -62,6 +62,10 @@
     width: -webkit-fill-available;
     width: -moz-webkit-fill-available;
     stretch: fill;
-    margin-left: 0.7em;
+    margin: 0.2em 0 0.7em 0;
+    border-radius: 5px;
+    border-style: solid;
+    border-color: inherit;
+    border-width: 1px;
   }
 </style>
diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
index 07c0c90f..1a5e20fb 100644
--- a/src/components/user_panel/user_panel.vue
+++ b/src/components/user_panel/user_panel.vue
@@ -1,12 +1,9 @@
 <template>
   <div class="user-panel">
-    <div v-if='user' class="panel panel-default">
-
+    <div v-if='user' class="panel panel-default" style="overflow: visible;">
       <user-card-content :user="user" :switcher="false"></user-card-content>
-
       <div class="panel-footer base00-background">
         <post-status-form v-if='user'></post-status-form>
-
       </div>
     </div>
     <login-form v-if='!user'></login-form>