Simplify structure and fix styling

Signed-off-by: Julius Härtl <jus@bitgrid.net>

src/components/card/AttachmentList.vue

@@ -30,8 +30,7 @@
 			style="display: none;"
 			multiple
 			@change="handleUploadFile">
-		<div class="attachment-list">
+		<ul class="attachment-list">
-			<ul>
 			<li v-for="attachment in uploadQueue" :key="attachment.name" class="attachment">
 				<a class="fileicon" :style="mimetypeForAttachment('none')" />
 				<div class="details">
@@ -43,9 +42,6 @@
 					</a>
 				</div>
 			</li>
-
-				<div class="attachment-list">
-					<ul>
 			<li v-for="attachment in attachments"
 				:key="attachment.id"
 				class="attachment">
@@ -76,9 +72,6 @@
 				</Actions>
 			</li>
 		</ul>
-				</div>
-			</ul>
-		</div>
 	</AttachmentDragAndDrop>
 </template>
 

src/components/card/CardSidebar.vue

@@ -633,13 +633,16 @@ export default {
 		width: 25vw;
 		min-width: 250px;
 		min-height: 120px;
-		margin: 20px 20px 60px 20px;
+		margin: 20px;
 		padding-bottom: 20px;
-	}
+		display: flex;
+		flex-direction: column;
 
-	.modal__content button {
+		&::v-deep .attachment-list {
-		float: right;
+			flex-shrink: 1;
-		margin: 40px 3px 3px 0;
+			overflow: scroll;
+			max-height: 50vh;
+		}
 	}
 
 </style>

webpack.js

@@ -32,5 +32,5 @@ const config = {
 	}
 };
 
-module.exports = merge(config, webpackConfig)
+module.exports = merge(webpackConfig, config)