Skip to content

Commit 5d5904b

Browse files
authored
fix(lightspeed): remove resets from PF CSS import (#469)
* fix(lightspeed): remove resets from PF CSS import fixes https://issues.redhat.com/browse/RHIDP-5575 * fix(lightspeed): fix alignment issues with title and headermenu
1 parent 728cc31 commit 5d5904b

File tree

3 files changed

+25
-2
lines changed

3 files changed

+25
-2
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@red-hat-developer-hub/backstage-plugin-lightspeed': patch
3+
---
4+
5+
Remove CSS resets from PatternFly CSS import

workspaces/lightspeed/plugins/lightspeed/src/components/LightSpeedChat.tsx

+19-1
Original file line numberDiff line numberDiff line change
@@ -56,9 +56,23 @@ import { LightspeedChatBox } from './LightspeedChatBox';
5656
import { LightspeedChatBoxHeader } from './LightspeedChatBoxHeader';
5757

5858
const useStyles = makeStyles(theme => ({
59+
body: {
60+
// remove default margin and padding from common elements
61+
'& h1, & h2, & h3, & h4, & h5, & h6, & p, & ul, & ol, & li': {
62+
margin: 0,
63+
padding: 0,
64+
},
65+
},
5966
header: {
6067
padding: `${theme.spacing(3)}px !important`,
6168
},
69+
headerMenu: {
70+
// align hamburger icon with title
71+
'& .pf-v6-c-button': {
72+
display: 'flex',
73+
alignItems: 'center',
74+
},
75+
},
6276
headerTitle: {
6377
justifyContent: 'left !important',
6478
},
@@ -321,12 +335,16 @@ export const LightspeedChat = ({
321335
onConfirm={handleDeleteConversation}
322336
/>
323337
)}
324-
<Chatbot displayMode={ChatbotDisplayMode.embedded}>
338+
<Chatbot
339+
displayMode={ChatbotDisplayMode.embedded}
340+
className={classes.body}
341+
>
325342
<ChatbotHeader className={classes.header}>
326343
<ChatbotHeaderMain>
327344
<ChatbotHeaderMenu
328345
aria-expanded={isDrawerOpen}
329346
onMenuToggle={() => setIsDrawerOpen(!isDrawerOpen)}
347+
className={classes.headerMenu}
330348
/>
331349
<ChatbotHeaderTitle className={classes.headerTitle}>
332350
<Title headingLevel="h1" size="3xl">

workspaces/lightspeed/plugins/lightspeed/src/plugin.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
* limitations under the License.
1515
*/
1616

17-
import '@patternfly/react-core/dist/styles/base.css';
17+
import '@patternfly/react-core/dist/styles/base-no-reset.css';
1818
import '@patternfly/chatbot/dist/css/main.css';
1919

2020
import {

0 commit comments

Comments
 (0)