component classes v2

[lemmy-ui.git] / src / shared / components / common / pictrs-image.tsx

diff --git a/src/shared/components/common/pictrs-image.tsx b/src/shared/components/common/pictrs-image.tsx
index 91e4a18b0bcdb0c37190ca6ba3cf62c77773b55a..7443749094970cd427bf9ea8cc30a07349d413cc 100644 (file)
--- a/src/shared/components/common/pictrs-image.tsx
+++ b/src/shared/components/common/pictrs-image.tsx
@@ -22,13 +22,14 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
 
   render() {
     return (
-      <picture>
+      <picture className="pictrs-image d-inline-block overflow-hidden">
         <source srcSet={this.src("webp")} type="image/webp" />
         <source srcSet={this.props.src} />
         <source srcSet={this.src("jpg")} type="image/jpeg" />
         <img
           src={this.props.src}
           alt={this.alt()}
+          title={this.alt()}
           loading="lazy"
           className={classNames({
             "img-fluid": !this.props.icon && !this.props.iconOverlay,
@@ -38,8 +39,9 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
             "img-expanded slight-radius":
               !this.props.thumbnail && !this.props.icon,
             "img-blur": this.props.thumbnail && this.props.nsfw,
-            "rounded-circle img-cover img-icon mr-2": this.props.icon,
-            "ml-2 mb-0 rounded-circle img-cover avatar-overlay": this.props.iconOverlay,
+            "rounded-circle img-cover img-icon me-2": this.props.icon,
+            "ms-2 mb-0 rounded-circle img-cover avatar-overlay":
+              this.props.iconOverlay,
             "avatar-pushup": this.props.pushup,
           })}
         />