Vue component getting cut off inside card - vue.js

Question

This is happening to one of the final components
This is what I want it to look like
This is the code for the card, I'm not sure why the upload is getting cut off I've tried adding a fixed height for the avatar-uploader class and for the div around it but so far nothing has helped.
<el-card>
<el-form class="form" :model="ruleForm" :rules="rules" ref="ruleForm" role="form">
<h1>Editando Curso</h1>
<el-form-item label="Nombre del curso" class="labels" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="Seleccione la materia requerida">
<el-select style="width: 80%;" v-model="matery" prop="materia" name="materia"
placeholder="Seleccionar la materia"
clearable>
<el-option
v-for="item in materia"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
<el-checkbox v-model="strict" prop="strict" name="strict">Obligatorio</el-checkbox>
<el-checkbox v-if="matery" v-model="remover" prop="remover">Remover</el-checkbox>
</el-form-item>
<el-form-item label="Resumen" prop="resumen">
<el-input type="textarea" v-model="ruleForm.summary"></el-input>
</el-form-item>
<el-form-item label="Descripcion" prop="description" class="vue-editor-form">
<vue-editor v-model="ruleForm.description">
<el-input v-model="ruleForm.description"></el-input>
</vue-editor>
</el-form-item>
<el-row :gutter="20">
<el-col :md="8">
<el-form-item label="Precio" prop="price">
<el-input-number controls-position="right" class="full-width" :min="1"
v-model="ruleForm.price"></el-input-number>
</el-form-item>
</el-col>
<el-col :md="8">
<el-form-item label="Horas" prop="hours">
<el-input-number controls-position="right" class="full-width" :min="1"
v-model="ruleForm.hours"></el-input-number>
</el-form-item>
</el-col>
<el-col :md="8">
<el-form-item label="Nota mínima" prop="min_grade">
<el-input-number controls-position="right" class="full-width" :min="1"
v-model="ruleForm.min_grade"></el-input-number>
</el-form-item>
</el-col>
</el-row>
<div class="line">
<el-upload
class="avatar-uploader"
action="/api/courses/upload-image"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img class="avatar" v-if="imageUrl" :src="imageUrl"/>
<img class="avatar" v-else :src="ruleForm.image"
#error="this.src='https://www.logistec.com/wp-content/uploads/2017/12/placeholder.png'">
</el-upload>
</div>
<el-row class="text-right">
<a href="/courses">
<el-button type="danger" plain>Cancelar</el-button>
</a>
<el-button icon="el-icon-check" type="danger" plain #click="submit(ruleForm)">
Guardar Edición
</el-button>
</el-row>
</el-form>
</el-card>
relevant css, the <el-card> had a class on it but that class doesn't exist so I removed it
.text-right {
text-align: right;
}
.full-width {
width: 100% !important;
}
.labels {
text-align: center;
padding-top: 2%;
}
.line {
text-align: center;
width: 100%;
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
height: 250px;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}