Add ability to change width, change top positioning of menu-tooltip

frontend/src/components/MenuButton.vue

@@ -1,5 +1,5 @@
 <template>
-	<menu-tooltip v-model='menuOpen' top='-4rem'>
+	<menu-tooltip v-model='menuOpen' top='0' width='10rem'>
 		<div class='menu_button__icon' @click='menuOpen = true' slot='button'>
 			<slot></slot>
 		</div>
@@ -45,9 +45,10 @@
 
 	.menu_button {
 		@at-root #{&}__option {
-			padding: 0.5rem;
-			font-size: 0.9rem;
+			border-radius: 0.25rem;
 			cursor: default;
+			font-size: 0.9rem;
+			padding: 0.5rem;
 			transition: all 0.2s;
 
 			&:hover { background-color: $color__lightgray--primary;  }

frontend/src/components/MenuTooltip.vue

@@ -11,7 +11,7 @@
 		<div
 			class='menu_tooltip__menu'
 			:class='{ "menu_tooltip__menu--show": value }'
-			:style='{ "margin-top": top }'
+			:style='{ "top": top, "width": width }'
 		>
 			<div class='menu_tooltip__menu__inner'>
 				<slot name='menu'></slot>
@@ -23,7 +23,7 @@
 <script>
 	export default {
 		name: 'MenuTooltip',
-		props: ['value', 'top']
+		props: ['value', 'top', 'width']
 	}
 </script>
 
@@ -32,6 +32,7 @@
 
 	.menu_tooltip {
 		display: inline-block;
+		position: relative;
 
 		@at-root #{&}__overlay {
 			height: 100%;
@@ -57,6 +58,7 @@
 			overflow-y: hidden;
 			position: absolute;
 			pointer-events: none;
+			top: calc(100% + 0.125rem);
 			transform: translateY(-0.25rem);
 			transition: transform 0.2s, opacity 0.2s;
 			width: 15rem;
@@ -65,7 +67,7 @@
 			@at-root #{&}--show {
 				opacity: 1;
 				pointer-events: all;
-				transform: translateY(0.125rem);
+				transform: translateY(0);
 			}
 
 			@at-root #{&}__inner {