diff --git a/src/styles/components/tasks.scss b/src/styles/components/tasks.scss
index dfefc20d7..8add68d05 100644
--- a/src/styles/components/tasks.scss
+++ b/src/styles/components/tasks.scss
@@ -54,8 +54,8 @@
     }
 
     .color-bubble {
-      width: 11px;
       height: 10px;
+      flex: 1 0 10px;
     }
 
     .tag {
diff --git a/src/styles/theme/navigation.scss b/src/styles/theme/navigation.scss
index a054e55ea..e9d5be524 100644
--- a/src/styles/theme/navigation.scss
+++ b/src/styles/theme/navigation.scss
@@ -163,8 +163,8 @@
         }
 
         .color-bubble {
-          width: 14px; // Without this, the bubble is only 10.2342357612px wide and seems squashed.
           height: 12px;
+          flex: 1 0 12px;
         }
 
         .favorite {