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,35 +93,77 @@ 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>
-                <Grid item xs={10}>
-                <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={2}>
-                    <div style={{height : "100%", display : "flex", flexDirection : "column", justifyContent : "flex-end"}}>
-            {
-                props.recurso ?
-                (
-                    <OrangeButton type="submit">Publicar</OrangeButton>
-                )
-                :
-                (
-                    <PurpleButton type="submit"><EditIcon/>Enviar</PurpleButton>
-                )
-            }
-        </div>
-        </Grid>
+                {
+                    windowWidth > 990 ?
+                    (
+                        <>
+                        <Grid item xs={10}>
+                            <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={2}>
+                            <div style={{height : "100%", display : "flex", flexDirection : "column", justifyContent : "flex-end"}}>
+                                {
+                                    props.recurso ?
+                                    (
+                                        <OrangeButton type="submit">Publicar</OrangeButton>
+                                    )
+                                    :
+                                    (
+                                        <PurpleButton type="submit"><EditIcon/>Enviar</PurpleButton>
+                                    )
+                                }
+                            </div>
+                        </Grid>
 
-        <div className="campos-obrigatorios">* Campos obrigatórios.</div>
+                        <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;
-    padding-right : 15px;
-    padding-left : 15px;
+    font-size : 14px;
     padding-bottom : 20px;
+    @media screen and (min-width : 990px) {
+        padding-right : 15px;
+        padding-left : 15px;
+    }
 
     h3 {
         font-family : 'Roboto Light','Roboto Regular',Roboto;