Boa tarde! Estou tendo problemas ao renderizar uma janela modal usando Thymeleaf. A finalidade da Modal é simplesmente mostrar um form com os detalhes do Atendimento, sem que precise redirecionar o usuário para outra página. Os dados são carregados corretamente. O problema está no alinhamento dos elementos do formulário, que ficam todos bagunçados na resolução de um monitor comum e, no celular/tablet fica tudo alinhado direitinho.
Abaixo segue o código da minha 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">×</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 -->