feat(tooltip): Force the bubble to display to the left at small break…

…points

src/components/Tooltip/Tooltip.modules.scss

@@ -1,4 +1,6 @@
 @import '../../scss/settings/colours';
+@import '../../scss/settings/responsive-grid';
+@import '../../scss/utility/responsive';
 
 $bubble-trigger-size: 24px;
 
@@ -52,22 +54,42 @@ $bubble-triangle-position: $bubble-triangle-width + 5px;
   }
 }
 
-.left {
-  composes: bubble;
-
+@mixin left-bubble {
   right: $bubble-offset * -1;
 
   &::before {
     right: $bubble-triangle-position;
   }
 }
 
+.left {
+  composes: bubble;
+
+  @include left-bubble;
+}
+
 .right {
   composes: bubble;
+}
 
-  left: calc(100% - #{$bubble-trigger-size} - #{$bubble-offset});
+@include at-breakpoint(xs) {
+  .right {
+    @include left-bubble;
+  }
+}
 
-  &::before {
-    left: $bubble-triangle-position;
+@include at-breakpoint(small) {
+  .right {
+    @include left-bubble;
+  }
+}
+
+@include from-breakpoint(medium) {
+  .right {
+    left: calc(100% - #{$bubble-trigger-size} - #{$bubble-offset});
+
+    &::before {
+      left: $bubble-triangle-position;
+    }
   }
 }