Form inside modal window does not align + Thymeleaf + Spring Boot

Question

Good afternoon! I’m having trouble rendering a modal window using Thymeleaf. The purpose of Modal is simply to show a form with the details of the Service, without having to redirect the user to another page. The data is loaded correctly. The problem is the alignment of the form elements, which are all messy in the resolution of a common monitor and, on mobile/tablet everything is aligned right.

Below follows the code of my modal.

 <!-- Modal Visualizar -->
<div class="modal fade" id="view-modal" th:id="${atendimento.id}" tabindex="-1" role="dialog" aria-labelledby="modalLabel" >
    <div class="modal-dialog modal-lg" role="dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Fechar"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="modalLabel">Detalhes do Atendimento</h4>
            </div>
            <div class="modal-body">
                <form role="form" th:object="${atendimento}" th:id="${atendimento.id}">
                     <fieldset>
                        <div class="panel panel-primary">
                            <div class="panel-heading">Atendimento</div>
                            <div class="panel-body">

                                <!-- ==== CLIENTE ==== -->                                                                          
                                <!-- Razão Social --> 
                                <div class="form-group">
                                    <label for="razaoSocial" class="form-control-label">Razão Social</label>
                                    <input id="razaoSocial" name="razaoSocial" type="text" th:value="${atendimento.cliente.razaoSocial}" readonly="readonly" class="form-control">
                                </div>

                                <div class="form-group">
                                    <label for="codigo" class=form-control-label">Código *</label>
                                    <input id="codigo" name="cliente" th:value="${atendimento.cliente.id}" class="form-control" type="text" readonly="readonly">                                                                                
                                </div>

                                <div class="form-group">
                                    <label for="status" class="form-control-label">Status</label>                                                                               
                                    <input id="status" class="form-control" th:value="${atendimento.cliente.status}" readonly="readonly" type="text">
                                </div>

                                <div class="form-group">
                                    <label class="form-control-label" for="telefone">Telefone *</label>
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="fa fa-phone"></i></span>
                                        <input id="telefone" name="telefone" class="form-control" readonly="readonly" th:value="${atendimento.cliente.telefone}" type="text" maxlength="12">
                                    </div>
                                </div>

                                <div class="form-group">      
                                    <label class="form-control-label" for="celular">Celular</label>
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="fa fa-phone"></i></span>
                                        <input id="celular" name="celular" class="form-control input-md" readonly="readonly" th:value="${atendimento.cliente.celular}" type="text" maxlength="13">
                                    </div>
                                 </div>

                                 <div class="form-group">
                                    <label class="form-control-label" for="email">Email *</label>
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
                                        <input id="email" name="email" class="form-control" readonly="readonly" th:value="${atendimento.cliente.email}" type="text">
                                    </div>
                                 </div>
                                <!-- ==== /. CLIENTE ====-->

                                <hr size="30">

                                <div class="form-group" >
                                    <label for="id" class="form-control-label">Código de Atendimento*</label>
                                    <input id="id" name="id" th:value="${atendimento.id}" class="form-control" readonly="readonly" type="text">                               
                                </div>

                                <div class="form-group">    
                                    <div class="selectContainer" >
                                        <select class="form-control" name="tipoAtendimento" disabled>
                                            <option selected th:value="${atendimento.tipoAtendimento}" th:text="${atendimento.tipoAtendimento}"></option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">                                                                        
                                    <div class="selectContainer">
                                        <select class="form-control" name="modulo" disabled>
                                            <option selected th:value="${atendimento.modulo}" th:text="${atendimento.modulo}"></option>
                                        </select>
                                    </div>                                             

                                </div>

                                <div class="form-group">
                                    <label for="descricao" class="form-control-label">Descrição *</label>
                                    <input id="descricao" name="descricao" th:value="${atendimento.descricao}" class="form-control" placeholder="Descrição do Atendimento" type="text" readonly="readonly">
                                </div>

                                <div class="form-group">
                                    <div class="input-group date" id='datetimepicker'>
                                        <span class="input-group-addon"><span class="fa fa-calendar"></span></span>
                                        <input type="text" id="dataAtendimento" name="dataAtendimento" class="form-control" th:value="${#dates.format(atendimento.dataAtendimento, 'dd/MM/yyyy')}" readonly="readonly">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="admUser" class="form-control-label">Nome do usuário que solicitou suporte *</label>
                                        <input id="admUser" name="admUser" th:value="${atendimento.admUser}" class="form-control input-md" readonly="readonly" type="text">             
                                </div>

                                <div class="form-group">
                                    <label for="operador" class="form-control-label">Operador*</label>
                                    <input id="operador" name="operador" readonly th:value="${userName}" readonly="readonly" class="form-control" required type="text">
                                </div>

                                <div class="form-group" >
                                    <label for="solucao" class="col-md-2 control-label">Solução *</label>
                                    <div class="col-md-8">
                                        <textarea id="solucao" name="solucao" th:text="${atendimento.solucao}" readonly="readonly" class="form-control" cols="70" rows="10"></textarea>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="observacao" class="col-md-2 control-label">Observação *</label>
                                    <div class="col-md-8">
                                        <textarea id="observacao" name="observacao" th:text="${atendimento.observacao}" readonly="readonly" required class="form-control" cols="70" rows="10"></textarea>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="statusAtendimento" class="form-control-label">Status *</label>
                                    <div class="selectContainer">
                                        <select class="form-control" id="statusAtendimento" name="statusAtendimento" disabled>
                                            <option th:value="${atendimento.statusAtendimento}" th:text="${atendimento.statusAtendimento}"></option>                           
                                        </select>
                                    </div>          
                                </div>                                
                            </div>
                        </div>                    
                    </fieldset>
                </form> 
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
            </div>                                                      
        </div>
    </div>
</div>
<!-- /.Modal Visualizar -->