2 files changed, 24 insertions, 1 deletions
diff --git a/vnext/src/components/Avatar.css b/vnext/src/components/Avatar.css
new file mode 100644
index 000000000..d30686ed0
--- /dev/null
+++ b/vnext/src/components/Avatar.css
@@ -0,0 +1,21 @@
+.Avatar {
+    display: flex;
+    padding: 12px;
+    width: 100%;
+}
+.msg-avatar {
+    max-height: 48px;
+    margin-right: 10px;
+    max-width: 48px;
+}
+.msg-avatar img {
+    max-height: 48px;
+    vertical-align: top;
+    max-width: 48px;
+}
+
+@media screen and (min-width: 450px) {
+    .Avatar {
+        width: 300px;
+    }
+}
+\ No newline at end of file
diff --git a/vnext/src/components/Avatar.js b/vnext/src/components/Avatar.js
index e20236495..6ea0d5d53 100644
--- a/vnext/src/components/Avatar.js
+++ b/vnext/src/components/Avatar.js
@@ -6,9 +6,11 @@ import { UserType } from './Types';
 
 import Icon from './Icon';
 
+import './Avatar.css';
+
 const Avatar = React.memo(props => {
     return (
-        <div style={Object.assign({ display: 'flex', padding: '12px', width: '300px' }, props.style)}>
+        <div className="Avatar" style={props.style}>
             <div className="msg-avatar">
                 {
                     props.user.uname ?