Feature
Refatoração dos componentes de media input.
Bugfix
- **Description**
Havia um bug onde a mídia não quebrava a linha no limite proposto e era cortada, dificultando assim sua visualização. Esse bug só ocorria em algumas resoluções.
- **Cause**
Pela minha análise e testes, a causa desse bug foi a propriedade css `display` no qual recebia `grid` como valor.
- **Solution**
A solução foi mudar o valor da propriedade `display` para `flex` e adicionar a propriedade `flex-wrap` com o valor `wrap`, para quebrar a linha corretamente e não cortar nenhuma imagem.
Changelog
Conforme minha análise dos componentes `InputMedia` e `MediaInput`, também meus estudos de arquitetura até o momento eu cheguei a conclusão que como os dois componentes deviam fazer parte do mesmo contexto DDD, não tinha a necessidade de ser separados.
O componente `InputMedia` era apenas um botão para adicionar a mídia, percebendo isso coloquei ele dentro do componente `MediaInput` pois ele fazia parte do mesmo contexto DDD.
Tomei a liberdade para nomear o componente `MediaInput` para `InputMediaComposer`, apesar de ser um nome maior, achei mais legível para a situação pois ele na verdade é um compositor que une outros componentes, `InputMedia` e `MediaGroup`, que também fiz as mudanças no nome para ficar mais legível e compatível com o contexto. Os nomes ficaram `InputMediaButton` e `InputMediaGroup` respectivamente.
A lógica não achei necessário simplificar, baseado em meu atual conhecimento. Apenas fiz uma pequena mudança na função de alterar a mídia. Também fiz uma mudança no **CSS**, diminuindo o `gap` das imagens de `1.6rem` para `0.8rem`, isso garantiu uma melhor distribuição das imagens nas seguintes resoluções: **`1920x1080`**, **`1366x768`**, **`1280x800`**, **`1600x900`**, **`2560x1440`**, **`960x540`**, .Nas demais resoluções(resoluções mobile) não houve mudanças relevantes, por isso preferi usar `0.8.rem`
Referência que usei para fazer os testes de distribuição em diferentes resoluções: [https://gs.statcounter.com/screen-resolution-stats](https://gs.statcounter.com/screen-resolution-stats). Também foi testado em algumas resoluções que a imagem ficava cortada, como por exemplo a resolução **`2560x1440`**.
Visual evidences :framed_picture:
As imagens a seguir são nas duas resoluções mais usadas de `Desktop`, `Tablet` e `Mobile` atualmente
### Mobile
**`360x800`**
**`390x844`**
### Tablet
**`768x1024`**
**`810x1080`**
### Desktop
**`1366x768`**
**`1920x1080`**
### Resolução do Ale
**`2560x1440`**
Todas as imagens inseridas no teste são de resoluções diferentes, garantindo a escala correta da imagem.
Checklist
- [x] Issue linked
- [ ] Build working correctly
- [ ] Tests created
Additional info
N/A
Closes #371
Feature
Refatoração dos componentes de media input.Bugfix
- **Description** Havia um bug onde a mídia não quebrava a linha no limite proposto e era cortada, dificultando assim sua visualização. Esse bug só ocorria em algumas resoluções.  - **Cause** Pela minha análise e testes, a causa desse bug foi a propriedade css `display` no qual recebia `grid` como valor. - **Solution** A solução foi mudar o valor da propriedade `display` para `flex` e adicionar a propriedade `flex-wrap` com o valor `wrap`, para quebrar a linha corretamente e não cortar nenhuma imagem.Changelog
Conforme minha análise dos componentes `InputMedia` e `MediaInput`, também meus estudos de arquitetura até o momento eu cheguei a conclusão que como os dois componentes deviam fazer parte do mesmo contexto DDD, não tinha a necessidade de ser separados. O componente `InputMedia` era apenas um botão para adicionar a mídia, percebendo isso coloquei ele dentro do componente `MediaInput` pois ele fazia parte do mesmo contexto DDD. Tomei a liberdade para nomear o componente `MediaInput` para `InputMediaComposer`, apesar de ser um nome maior, achei mais legível para a situação pois ele na verdade é um compositor que une outros componentes, `InputMedia` e `MediaGroup`, que também fiz as mudanças no nome para ficar mais legível e compatível com o contexto. Os nomes ficaram `InputMediaButton` e `InputMediaGroup` respectivamente. A lógica não achei necessário simplificar, baseado em meu atual conhecimento. Apenas fiz uma pequena mudança na função de alterar a mídia. Também fiz uma mudança no **CSS**, diminuindo o `gap` das imagens de `1.6rem` para `0.8rem`, isso garantiu uma melhor distribuição das imagens nas seguintes resoluções: **`1920x1080`**, **`1366x768`**, **`1280x800`**, **`1600x900`**, **`2560x1440`**, **`960x540`**, .Nas demais resoluções(resoluções mobile) não houve mudanças relevantes, por isso preferi usar `0.8.rem` Referência que usei para fazer os testes de distribuição em diferentes resoluções: [https://gs.statcounter.com/screen-resolution-stats](https://gs.statcounter.com/screen-resolution-stats). Também foi testado em algumas resoluções que a imagem ficava cortada, como por exemplo a resolução **`2560x1440`**.Visual evidences :framed_picture:
As imagens a seguir são nas duas resoluções mais usadas de `Desktop`, `Tablet` e `Mobile` atualmente ### Mobile **`360x800`**  **`390x844`**  ### Tablet **`768x1024`**  **`810x1080`**  ### Desktop **`1366x768`**  **`1920x1080`**  ### Resolução do Ale **`2560x1440`** Todas as imagens inseridas no teste são de resoluções diferentes, garantindo a escala correta da imagem.
Checklist
- [x] Issue linked - [ ] Build working correctly - [ ] Tests createdAdditional info
N/A