Termbox: make widths responsive

src/components/TermBox.vue

@@ -124,6 +124,13 @@ export default class TermBox extends ( mixins( Messages ) as VueConstructor<Term
 			max-width: 420px;
 		}
 
+		&__label,
+		&__description,
+		&__aliases {
+			min-width: 260px;
+			max-width: 420px;
+		}
+
 		&__label {
 			color: $color-black;
 			line-height: 1.3em;
@@ -172,4 +179,43 @@ export default class TermBox extends ( mixins( Messages ) as VueConstructor<Term
 		}
 	}
 }
+
+@include media-breakpoint-up( sm ) {
+
+}
+
+@include media-breakpoint-up( md ) {
+	// :not( .wikibase-termbox--primaryLanguage ) {
+	.wikibase-termbox {
+		display: table;
+
+		&__language {
+			display: block;
+		}
+
+		&__label,
+		&__description,
+		&__alias {
+			display: table-cell;
+			// TODO same width for the three of them
+		}
+	}
+}
+
+@include media-breakpoint-up( lg ) {
+	// :not( .wikibase-termbox--primaryLanguage ) {
+	.wikibase-termbox {
+		&__language {
+			width: 128px;
+			display: table-cell;
+		}
+
+		&__label,
+		&__description,
+		&__alias {
+			display: table-cell;
+			// TODO same width for the three of them
+		}
+	}
+}
 </style>

src/styles/_main.scss

@@ -1,3 +1,4 @@
 @import "_variables";
 @import "_font-helper";
 @import "~bootstrap/scss/mixins/_screen-reader";
+@import "~bootstrap/scss/mixins/_breakpoints";

src/styles/_variables.scss

@@ -1,3 +1,9 @@
+$sm: 501px;
+$md: 892px;
+$lg: 1036px;
+
+$grid-breakpoints: ( sm: $sm, md: $md, lg: $lg );
+
 $base-font-size: 16px;
 
 $color-light-azureish-gray: #72777d;