refactor(ui): give distinct class

if `valueToDisplay === ""`

src/components/CalculatorContainer.vue

@@ -279,7 +279,7 @@ function setEvaluationValue(newEvaluation: Evaluations) {
 		.entry-screen-container {
 			@apply flex justify-end;
 
-			@apply mt-8 mb-2;
+			@apply mb-2;
 		}
 
 		.entry-screen-container .screen {

src/components/CalculatorContainer/ExpressionScreen.test.ts

@@ -18,4 +18,15 @@ describe("Component: CalculatorContainer/ExpressionScreen", () => {
 		})
 		expect(calculatorScreen.text()).toEqual("1")
 	})
+
+	it("must have distinct class if `valueToDisplay` is empty", () => {
+		const wrapper = shallowMount(Component, {
+			"props": {
+				"valueToDisplay": ""
+			}
+		})
+
+		const calculatorScreen = wrapper.find(".expression-screen")
+		expect(calculatorScreen.classes()).toContain("empty")
+	})
 })

src/components/CalculatorContainer/ExpressionScreen.vue

@@ -1,14 +1,24 @@
 <script setup lang="ts">
+import { computed } from "vue"
+
 interface Props {
 	valueToDisplay: string
 }
-defineProps<Props>()
+const props = defineProps<Props>()
+
+const expressionScreenClasses = computed(() => ({
+	"empty": props.valueToDisplay === ""
+}))
 </script>
 
 <template>
-	<span class="expression-screen">
+	<span class="expression-screen" :class="expressionScreenClasses">
 		{{ valueToDisplay }}
 	</span>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.expression-screen.empty {
+	@apply h-8;
+}
+</style>