SharePoint workbench webpart size is different compared to website - vue.js

Question

I've written a webpart in Vue.js where the user can write a lot of information. When I tested the webpart in my SharePoint workbench it seemed to look fine.
However, when I deployed the .sppkg file to the SharePoint site, the size of the webpart changed and I couldn't click on Create or Cancel anymore.
If I change the height, I can't scroll down. Is there a way to fix this?
AddAthleticTestDialog: function() {
var SelectedPlayerID = this.$store.state.selectedPlayer.ID;
var $this = this;
this.$modal.show(
AddAthleticTest,
{
text: SelectedPlayerID
},
{
draggable: true,
width: 1200,
height: 700
},
{
closed: function(event) {
$this.loadHistory(SelectedPlayerID);
}
}
);
},
Here's how it's shown in the workbench:
And here's how it's shown when I upload it on the webpage:
Here's a small part of the code:
<template>
<div class="container p-3">
<tbody>
<tr>
<th scope="row" style="width:200px; padding-left:0;padding-right:0">Antropo.</th>
</tr>
</tbody>
<div class="row">
<div class="col">
<label for="exampleInputAthletes">Athletes</label>
<input v-model="athleticsData.Athletes" type="text" class="form-control" id="Athletes" placeholder="Enter Athletes" />
</div>
<div class="col">
<label for="exampleInputTestingDay">Testing Day</label>
<input v-model="athleticsData.TestingDay" type="text" class="form-control" id="TestingDay" placeholder="Enter Testing Day" />
</div>