Vuetify Mobile Fill Entire Screen in Portrait - vue.js

Question

When I test my app in mobile portrait mode it looks like this:
Mobile portrait
But I'm trying to make it look like this from Vuetify
In landscape its fantastic, portrait no luck. I'm using fluid and fill-height on the v-container but no luck.
I've also tried height="100vh" on the container but that also didn't work.
This is some sample code that's been simplified and it doesn't work either:
<template>
<v-container fluid fill-height>
<v-layout>
<v-row align="center" justify="center" class="mx-auto">
<v-col cols="8">
<v-card
outlined
class="d-flex"
>
<v-text-field
color="#F03C99"
label="Email"
placeholder="Email for Your Showroom"
outlined
class="ml-4"
></v-text-field>
</v-card>
</v-col>
</v-row>
</v-layout>
</v-container>
</template>
I'm starting to think that it might be that I'm using router-view this is what I have in my router
<template>
<v-app>
<router-view name="navigation" :key="$route.fullPath"></router-view>
<router-view class="fill-height" key="main"></router-view>
<router-view name="confirm"></router-view>
</v-app>
</template>
Here is my real code:
<template>
<v-container fluid fill-height>
<v-layout>
<v-row align="center" justify="center" class="mx-auto">
<v-col :cols="overallColumns">
<v-card
outlined
>
<v-row>
<v-col
:cols="accountForImage"
align="start"
>
<v-card-title>
<v-img src='small-bella-logo.png' max-height="41px" max-width="128px" contain></v-img>
</v-card-title>
<v-form>
<v-text-field
v-model="email"
color="#F03C99"
label="Email"
:rules="[rules.email]"
placeholder="Email for Your Showroom"
outlined
class="ml-4"
:class="marginRight"
:error-messages="errorMessage"
data-cy="login"
></v-text-field>
<v-text-field
v-model="password"
color="#F03C99"
label="Password"
placeholder="Enter your password"
outlined
class="ml-4"
:class="marginRight"
:append-icon="passwordVisible ? 'visibility' : 'visibility_off'"
:type="passwordVisible ? 'text' : 'password'"
#click:append="passwordVisible = !passwordVisible"
data-cy="password"
></v-text-field>
<v-row
class="mt-n5"
>
<v-col
:cols="stackColumns"
align="start">
<v-btn
color="#AF3482"
class="white--text ml-4"
data-cy="login-button"
#click="logInWithBella"
>LOGIN</v-btn>
</v-col>
<v-col
:cols="stackColumns"
:align="alignStackedColumnToEnd"
class="mt-2"
:class="marginLeftWhenStacked"
>
<h1
#click="forgotPassword"
class="caption font-weight-bold ml-4 pointer pink_text"
>FORGOT PASSWORD?</h1>
</v-col>
</v-row>
<v-row align="center" justify="center">
<v-col cols="12" align="center" justify="center">
<v-divider class="ml-4"></v-divider>
</v-col>
</v-row>
<v-row
justify="space-between"
>
<v-col
:cols="columnsFiveAndTwelve"
:align="alignStackedColumnToCenter"
justify="start">
<v-btn
class="ml-4 white--text"
color="#3B5998"
#click="logInWithFacebook()"
medium>
LOGIN WITH FACEBOOK
</v-btn>
</v-col>
<v-col
:cols="columnsFiveAndTwelve"
:align="alignStackedColumnToCenter"
justify="end">
<v-btn
class="white--text"
:class="marginLeftAndNegativeLeft"
color="#DB4437"
#click="logInWithGoogle()"
medium
>
LOGIN WITH GOOGLE
</v-btn>
</v-col>
</v-row>
<v-row align="center" justify="center">
<v-col cols="12" align="center" justify="center">
<v-divider class="ml-4"></v-divider>
</v-col>
</v-row>
<v-row align="start" justify="center">
<v-col cols="12" align="start" justify="center">
<h1 class=" ml-4 font title font-weight-regular">
No Account?
</h1>
<v-btn
class="ml-4 white--text mt-2"
:class="marginBottom"
color="#AF3482"
block
#click="sendAndCreateToken"
>
SIGN UP AND CREATE SHOWROOM
</v-btn>
</v-col>
</v-row>
</v-form>
</v-col>
<v-col
cols="6"
align="center"
class=""
v-if="removeImage"
>
<v-img src="login.png" class="mt-10" max-height="519px" max-width="187px" contain></v-img>
</v-col>
</v-row>
</v-card>
</v-col>
</v-row>
<p>{{ $vuetify.breakpoint.name }}</p>
</v-layout>
</v-container>
</template>