fix(progress): move customizations into progress bar component

src/components/misc/ProgressBar.vue

@@ -35,7 +35,7 @@ defineProps({
 .progress-bar {
 	--progress-height: var(--size-normal, #{$size-normal});
 	--progress-bar-background-color: var(--border-light, #{$border-light});
-	--progress-value-background-color: var(--text, #{$text});
+	--progress-value-background-color: var(--grey-500, #{$text});
 	--progress-border-radius: var(--radius-rounded, #{$radius-rounded});
 	--progress-indeterminate-duration: 1.5s;
 
@@ -46,11 +46,10 @@ defineProps({
 	appearance: none;
 	border: none;
 	border-radius: var(--progress-border-radius);
-	display: block;
 	height: var(--progress-height);
 	overflow: hidden;
 	padding: 0;
-	width: 100%;
+	margin-bottom: 0;
 
 	&::-webkit-progress-bar {
 		background-color: var(--progress-bar-background-color);
@@ -153,7 +152,17 @@ defineProps({
 
 	&::-moz-progress-bar,
 	&::-webkit-progress-value {
-		background: var(--grey-500);
+		background: var(--progress-value-background-color);
+	}
+
+	width: 50px;
+	margin: 0 0.5rem 0 0;
+	flex: 3 1 auto;
+
+	@media screen and (max-width: $tablet) {
+		margin: 0.5rem 0 0 0;
+		order: 1;
+		width: 100%;
 	}
 }
 

src/components/tasks/partials/kanban-card.vue

@@ -43,6 +43,7 @@
 			<h3>{{ task.title }}</h3>
 
 			<ProgressBar
+				class="task-progress"
 				v-if="task.percentDone > 0"
 				:value="task.percentDone * 100"
 				is-small
@@ -189,11 +190,6 @@ $task-background: var(--white);
 		word-break: break-word;
 	}
 
-	.progress {
-		margin: 8px 0 0 0;
-		width: 100%;
-		height: 0.5rem;
-	}
 
 	.due-date {
 		float: right;
@@ -333,4 +329,10 @@ $task-background: var(--white);
 .kanban-card__done {
 	margin-right: .25rem;
 }
+
+.task-progress {
+	margin: 8px 0 0 0;
+	width: 100%;
+	height: 0.5rem;
+}
 </style>

src/components/tasks/partials/singleTaskInlineReadonly.vue

@@ -182,9 +182,5 @@ const project = computed(() => projectStore.projects[task.projectId])
 		color: var(--grey-500);
 		width: auto;
 	}
-
-	.progress {
-		margin-bottom: 0;
-	}
 }
 </style>

src/styles/components/tasks.scss

@@ -15,11 +15,6 @@
 		}
 	}
 
-	.progress {
-		// overwrite bulma
-		margin-bottom: 0;
-	}
-
 	&.noborder {
 		margin: 1rem -0.5rem;
 	}