Skip to content

Commit 9240ca4

Browse files
drodildrodil
committed
fix: styling when long answer given without word breaks
1 parent f690903 commit 9240ca4

File tree

4 files changed

+76
-74
lines changed

4 files changed

+76
-74
lines changed

‎plugins/qeta/src/components/QuestionPage/AnswerCard.tsx

Lines changed: 61 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,5 @@
11
import { AnswerResponse, QuestionResponse } from '../../api';
2-
import {
3-
Box,
4-
Card,
5-
CardContent,
6-
Grid,
7-
Link,
8-
Typography,
9-
} from '@material-ui/core';
2+
import { Box, Card, CardContent, Link, Typography } from '@material-ui/core';
103
import React from 'react';
114
import { MarkdownContent } from '@backstage/core-components';
125
import { VoteButtons } from './VoteButtons';
@@ -38,70 +31,68 @@ export const AnswerCard = (props: {
3831

3932
return (
4033
<Card id={`a${answer.id}`}>
41-
<CardContent>
42-
<Grid container spacing={0}>
43-
<Grid item className={styles.questionCardVote}>
44-
<VoteButtons entity={answerEntity} question={question} />
45-
</Grid>
46-
<Grid item>
47-
{editMode ? (
48-
<AnswerForm
49-
question={question}
50-
onPost={onAnswerEdit}
51-
id={answerEntity.id}
52-
/>
53-
) : (
54-
<>
55-
<Typography variant="body1" gutterBottom>
56-
<MarkdownContent
57-
className={styles.markdownContent}
58-
content={answerEntity.content}
59-
dialect="gfm"
60-
/>
34+
<CardContent className={styles.questionCard}>
35+
<div className={styles.questionCardVote}>
36+
<VoteButtons entity={answerEntity} question={question} />
37+
</div>
38+
<div className={styles.questionCardContent}>
39+
{editMode ? (
40+
<AnswerForm
41+
question={question}
42+
onPost={onAnswerEdit}
43+
id={answerEntity.id}
44+
/>
45+
) : (
46+
<>
47+
<Typography variant="body1" gutterBottom>
48+
<MarkdownContent
49+
className={styles.markdownContent}
50+
content={answerEntity.content}
51+
dialect="gfm"
52+
/>
53+
</Typography>
54+
<Box>
55+
<Typography variant="caption" gutterBottom>
56+
By{' '}
57+
<Link href={`/qeta/users/${answerEntity.author}`}>
58+
{formatEntityName(answerEntity.author)}
59+
</Link>{' '}
60+
<RelativeTime value={answerEntity.created} />
61+
{answerEntity.updated && (
62+
<>
63+
{' '}
64+
(updated <RelativeTime value={answerEntity.updated} />)
65+
</>
66+
)}
6167
</Typography>
62-
<Box>
63-
<Typography variant="caption" gutterBottom>
64-
By{' '}
65-
<Link href={`/qeta/users/${answerEntity.author}`}>
66-
{formatEntityName(answerEntity.author)}
67-
</Link>{' '}
68-
<RelativeTime value={answerEntity.created} />
69-
{answerEntity.updated && (
70-
<>
71-
{' '}
72-
(updated <RelativeTime value={answerEntity.updated} />)
73-
</>
74-
)}
75-
</Typography>
68+
</Box>
69+
{answerEntity.own && (
70+
<Box className={styles.questionCardActions}>
71+
<Link
72+
underline="none"
73+
href="#"
74+
onClick={handleDeleteModalOpen}
75+
>
76+
Delete
77+
</Link>
78+
<Link
79+
underline="none"
80+
href="#"
81+
onClick={() => setEditMode(true)}
82+
>
83+
Edit
84+
</Link>
85+
<DeleteModal
86+
open={deleteModalOpen}
87+
onClose={handleDeleteModalClose}
88+
entity={answerEntity}
89+
question={question}
90+
/>
7691
</Box>
77-
{answerEntity.own && (
78-
<Box className={styles.questionCardActions}>
79-
<Link
80-
underline="none"
81-
href="#"
82-
onClick={handleDeleteModalOpen}
83-
>
84-
Delete
85-
</Link>
86-
<Link
87-
underline="none"
88-
href="#"
89-
onClick={() => setEditMode(true)}
90-
>
91-
Edit
92-
</Link>
93-
<DeleteModal
94-
open={deleteModalOpen}
95-
onClose={handleDeleteModalClose}
96-
entity={answerEntity}
97-
question={question}
98-
/>
99-
</Box>
100-
)}
101-
</>
102-
)}
103-
</Grid>
104-
</Grid>
92+
)}
93+
</>
94+
)}
95+
</div>
10596
</CardContent>
10697
</Card>
10798
);

‎plugins/qeta/src/components/QuestionPage/QuestionCard.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export const QuestionCard = (props: { question: QuestionResponse }) => {
5757

5858
return (
5959
<Card variant="outlined">
60-
<CardContent>
60+
<CardContent className={styles.questionCard}>
6161
<div className={styles.questionCardVote}>
6262
<VoteButtons entity={question} />
6363
<FavoriteButton entity={question} />

‎plugins/qeta/src/components/QuestionPage/QuestionPage.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -99,14 +99,14 @@ export const QuestionPage = () => {
9999
{(question.answers ?? []).concat(newAnswers).map(a => {
100100
return (
101101
<>
102+
<Divider className={styles.questionDivider} />
102103
<Box key={a.id} sx={{ mb: 1 }}>
103104
<AnswerCard answer={a} question={question} />
104105
</Box>
105-
<Divider />
106106
</>
107107
);
108108
})}
109-
<Divider />
109+
<Divider className={styles.questionDivider} />
110110
<AnswerForm question={question} onPost={onAnswerPost} />
111111
</Content>
112112
);

‎plugins/qeta/src/utils/hooks.ts

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,16 +81,27 @@ export const useStyles = makeStyles(theme => {
8181
border: `1px solid ${theme.palette.error.main} !important`,
8282
},
8383
markdownContent: {
84+
'& *': {
85+
wordBreak: 'break-word',
86+
},
8487
'& h1, h2, h3, h4, h5, h6': {
8588
marginTop: 0,
8689
},
8790
},
8891
successColor: {
8992
color: theme.palette.success.main,
9093
},
94+
questionDivider: {
95+
marginTop: theme.spacing(2),
96+
marginBottom: theme.spacing(2),
97+
},
98+
questionCard: {
99+
paddingTop: '0px',
100+
},
91101
questionCardVote: {
92102
textAlign: 'center',
93-
width: '50px',
103+
width: '32px',
104+
marginTop: '10px',
94105
marginRight: '20px',
95106
display: 'inline-block',
96107
verticalAlign: 'top',

0 commit comments

Comments
 (0)