minimalist expand button

src/components/Article.vue

 <template>
-  <article v-bind:class="{'v-sheet v-card rounded-xl': !articleLookup, dictionary}" v-if="article">
+  <article v-bind:class="{'v-sheet v-card rounded-xl': !articleLookup, dictionary, 'collapsable': collapsable}" v-if="article">
     <Header :lemmas="article.lemmas" :dictionary="dictionary" :article_id="article.article_id" />
     <InflectionButton :lemmas="article.lemmas" :dictionary="dictionary" :article_id="article.article_id"/>
     
@@ -253,4 +253,8 @@ ul li.definition {
   padding: 12px;
 }
 
+.collapsable {
+  padding-bottom: 38px;
+}
+
 </style>

src/components/Header.vue

@@ -23,15 +23,16 @@
     </span>
     <span v-if="$parent.collapsed && $parent.has_content" class="definition_snippet">
       - {{$parent.snippet}}
-    </span>                <span v-if="$parent.collapsable">
-          <v-btn
-           text
-           small
+    </span>                <span v-if="$parent.collapsable" >
+          <v-btn class="expand_icon"
+           :title="$parent.collapsed? 'Vis mer' : 'Kollaps'"
+           width="100%"
+           
            plain
            
-           class="expand_icon" 
-           @click="$parent.collapsed=!$parent.collapsed">{{$parent.collapsed? 'Vis mer' : 'Kollaps'}}
-           <v-icon right color="primary">{{$parent.collapsed ? 'expand_more': 'expand_less'}}</v-icon></v-btn></span> 
+           
+           @click="$parent.collapsed=!$parent.collapsed">
+           <v-icon right>{{$parent.collapsed ? 'expand_more': 'expand_less'}}</v-icon></v-btn></span> 
   </div>
 </template>
 
@@ -201,4 +202,14 @@ div.lemma {
   color: var(--v-text-base) !important;
 }
 
+.expand_icon {
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  width: 100%;
+  text-align: center;
+  border-bottom-right-radius: 28px;
+  border-bottom-left-radius: 28px;
+}
+
 </style>