Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: inline display for comment links #17496

Merged
merged 14 commits into from
Apr 28, 2023
Merged
10 changes: 9 additions & 1 deletion src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import htmlRenderers from './HTMLRenderers';
import * as HTMLEngineUtils from './htmlEngineUtils';
import styles from '../../styles/styles';
import fontFamily from '../../styles/fontFamily';
import getPlatform from '../../libs/getPlatform/index';
import CONST from '../../CONST';

const propTypes = {
/** Whether text elements should be selectable */
Expand Down Expand Up @@ -50,7 +52,13 @@ const customHTMLElementModels = {
}),
};

const defaultViewProps = {style: [styles.alignItemsStart, styles.userSelectText]};
// For web platform defaultViewProps should use block display, otherwise immediate
// children will inherit display:block even when they have display:inline set in CSS.
const defaultViewProps = {
style: [CONST.PLATFORM.WEB, CONST.PLATFORM.DESKTOP].includes(getPlatform())
? [styles.dBlock, styles.userSelectText]
: [styles.dFlex, styles.userSelectText],
};

// We are using the explicit composite architecture for performance gains.
// Configuration for RenderHTML is handled in a top-level component providing
Expand Down
2 changes: 1 addition & 1 deletion src/components/ThumbnailImage.js
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ class ThumbnailImage extends PureComponent {

render() {
return (
<View style={[this.props.style, styles.overflowHidden]}>
<View style={[this.props.style, styles.overflowHidden, styles.alignSelfStart]}>
<View
style={[
StyleUtils.getWidthAndHeightStyle(this.state.thumbnailWidth, this.state.thumbnailHeight),
Expand Down
3 changes: 3 additions & 0 deletions src/styles/utilities/display.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,7 @@ export default {
dInline: {
display: 'inline',
},
dBlock: {
display: 'block',
},
};