responsiveness fix

src/Components/ResourcePageComponents/CommentForm.js

@@ -72,6 +72,8 @@ export default function CommentForm (props) {
         }
     }
 
+    let windowWidth = window.innerWidth
+
     return (
         <StyledForm onSubmit={handleSubmit}>
             <label htmlFor="avaliacao-estrelas" className="start-label">
@@ -91,6 +93,10 @@ export default function CommentForm (props) {
             <div className="star-alert" style={attemptedSubmit ? {visibility : "visible"} : {visibility : "hidden" }}>{props.recurso ? "Avalie se o recurso foi útil." : "Avalie se esta coleção foi útil."}</div>
 
             <Grid container>
+                {
+                    windowWidth > 990 ?
+                    (
+                        <>
                         <Grid item xs={10}>
                             <StyledTextField
                                 colecao={!props.recurso}
@@ -120,6 +126,44 @@ export default function CommentForm (props) {
                         </Grid>
 
                         <div className="campos-obrigatorios">* Campos obrigatórios.</div>
+                        </>
+                    )
+                    :
+                    (
+                        <>
+                        <Grid item xs={12}>
+                            <StyledTextField
+                                colecao={!props.recurso}
+                                value={comment.value}
+                                multiline
+                                rows="5"
+                                error={comment.error}
+                                label={props.recurso ? "Escreva aqui a sua experiência com este Recurso" : "Escreva aqui a sua experiência com esta Coleção"}
+                                onChange={e => handleChange(e)}
+                                required={true}
+                                help = {comment.error ? (props.recurso ? "Escreva aqui a sua experiência com este Recurso" : "Escreva aqui a sua experiência com esta Coleção") : ''}
+                                />
+                        </Grid>
+                        <Grid item xs={12}>
+                            <div style={{paddingTop : "18px", display : "flex", justifyContent : "space-between"}}>
+                                <div className="campos-obrigatorios">* Campos obrigatórios.</div>
+                                <div style={{width : "40%"}}>
+                                {
+                                    props.recurso ?
+                                    (
+                                        <OrangeButton type="submit">Publicar</OrangeButton>
+                                    )
+                                    :
+                                    (
+                                        <PurpleButton type="submit"><EditIcon/>Enviar</PurpleButton>
+                                    )
+                                }
+                                </div>
+                            </div>
+                        </Grid>
+                    </>
+                    )
+                }
             </Grid >
         </StyledForm>
     )
@@ -177,6 +221,9 @@ const StyledForm = styled.form`
     display : flex;
     flex-direction : column;
     text-align : start;
+    @media screen and (max-width : 990px) {
+        padding-left : 15px;
+    }
 
     .start-label {
         font-size : 14px;

src/Components/ResourcePageComponents/CommentsArea.js

@@ -183,9 +183,12 @@ const GrayContainer = styled.div`
     display : flex;
     flex-direction : column;
     justify-content : space-between;
+    font-size : 14px;
+    padding-bottom : 20px;
+    @media screen and (min-width : 990px) {
         padding-right : 15px;
         padding-left : 15px;
-    padding-bottom : 20px;
+    }
 
     h3 {
         font-family : 'Roboto Light','Roboto Regular',Roboto;