From a03b13235b7fdb18bb2f687410fef30ff8a684b4 Mon Sep 17 00:00:00 2001
From: DanConwayDev <DanConwayDev@protonmail.com>
Date: Mon, 5 Feb 2024 12:32:11 +0000
Subject: [PATCH] feat(UserHeader): add size option

enables the display of UserHeader in sm or md option when flag inline is
true or false
---
 .../users-header--inline-small-loading.png    | Bin 0 -> 5729 bytes
 __snapshots__/users-header--inline-small.png  | Bin 0 -> 8624 bytes
 __snapshots__/users-header--inline.png        | Bin 9841 -> 9606 bytes
 __snapshots__/users-header--small.png         | Bin 0 -> 8982 bytes
 __snapshots__/users-header.test.js.snap       |  95 ++++++++++++++----
 .../users/UserHeader.stories.svelte           |  32 ++++++
 src/lib/components/users/UserHeader.svelte    |  46 +++++++--
 7 files changed, 143 insertions(+), 30 deletions(-)
 create mode 100644 __snapshots__/users-header--inline-small-loading.png
 create mode 100644 __snapshots__/users-header--inline-small.png
 create mode 100644 __snapshots__/users-header--small.png

diff --git a/__snapshots__/users-header--inline-small-loading.png b/__snapshots__/users-header--inline-small-loading.png
new file mode 100644
index 0000000000000000000000000000000000000000..64bdf7d969c367ef8f6c93072f72b176aefce4e4
GIT binary patch
literal 5729
zcmeAS@N?(olHy`uVBq!ia0y~yU<ERnE^x2`sq?jW!+;cHage(c!@6@aFM%AEVkgfK
z4j`!ENa<i;5aafAaSW-L^Y-rPyd-xKhl@?85BC{+|6B6^|LQvvD`N`OBp-R0lr?X=
zE_HuWU)Rkr(XBr|K0f{%Xc7a%q-o#fz>FVOObQ@I3ugm}5>R7c0#Xh$7&t)O#DS1p
zUCm!`GS9yM@I#Ylk1OZge{bu1y2$WY)?S&}XHDj9<Nx`Y8R)bRopwtZ-tsU1_|2^U
z@=Ke0_8ev1M<p(AkvV^U^~SqC;`=S<o_qY<{&=CyJo{uFJ&XPQg%)#;KP-^@{WtT^
z&rNcdpD1X6e0ufl)AarJz1OcFp7Ff@@qLNpJ^T9&&p-e8t4iYc-<OZf*V`Z6fB$8L
zP5<@z$E*7pfm#lT@3Lgr_jVn>$MkD&%0ACX|M<Rq_Vdp--adoL@3dr?=Xd?T=l!Lo
zzYjkRZmhAb<_BuLP+H9JXMgto>uU;sy{~&?3$lLtb$KAgpztP<=|R?4gT*!0-#`(w
z;C14u^Ows?-wW>3h3Nfiz*w+*?y;)B29Il`XMZiq*?xKNagf#r-8LbG)jyMKfokVY
z7q8|6iUpK?zI*=YqhHe-#Jl<1B6W}7uea^LTPN3kIP=W$&ldj=X&<i1*(s5{HLmY$
zTG3Z=kTKFbb~5;0PCE0sbZXu#JB^0_mABR%(FED>gT*|av94~{KdzVS*MLHRVO{xW
z!`*Moq>?vE=I4L5n0rn>jy+E2*o<XQE9&BU-yT~m3{v&My5^Ma?YC({UqQSFjJ8*_
z4}e$)o(nO6j8X7mU;$DM28;qA;X^DAAc{knrjj{d&)+V2FA1`#LH`kp0*En)68}JC
zxKTR?sH7VW_|bqLxO#Rp^^K;!(bPAfP2JHfIGP1Vv*2hJ1olBj17S1}2EpLVXpJ;l
iBaPNbL#!~qvHyP8RHoH`LJopPvpik>T-G@yGywp?0s1!p

literal 0
HcmV?d00001

diff --git a/__snapshots__/users-header--inline-small.png b/__snapshots__/users-header--inline-small.png
new file mode 100644
index 0000000000000000000000000000000000000000..0fe68d5b67b0f92740db5c5d3a78f9fef9a74138
GIT binary patch
literal 8624
zcmeI2`&W}!y2oR++N!{uai)}u;5tA!tzc+^&;UuC$^aP<yNX2v2w1Ku*AgHgmw1`t
zXyp>3V92c;P>zR7gdl+cLB|3Ca*;$p3?U+t5HZ0JNXUicBr`wFUvSPki}#o3+3#9=
zuV;VX{e0fFpS^E>8y#+U(D@($0I)+wgnkDAd~9_;dj83Ns}WR4Vy$Km=DYB309|}n
zg|)E{^9}OcC)TI@lhnTf0LK8x&_A6kA-|X4ZYLED%hhw(%JQk&FP=X<9s`OR0H@5>
zjM)zhRl<NlzpCc4oF*UiwTG`BVUI6N-J0wi+~4)r_E5}V@~JL_vsb3`Le3L^FY)Y|
z_+ej9-@r>hHe4OVRxOB^RLa+nufMuF2>F?Bp58be`s)`5jaqdCkf`VDsRB91TrMLE
z&^~d!nLulZfKy1{ysdpU?~2rQ&+lx`!6Se@R`aXh|E*?L86;X*k(gwVBI@{1jc{?6
z%iilC&kL_A2orY?8L#PD+vE;lQ6^7>2)+~UZn<PuKbH<UJ^RQuDSAtH=JbCOW1vqz
zmbi0P+*tv>)vfr{alVnEq2tIksF;ELL~Jz8aO3t-Gt&HwMQ?qq><zJ)x=on^<_6BJ
zo=$?H1UN2Cs*kvwv|aXNP&jZ50^Z2)%V7nIZ_wa(ADZKiR=D#|o~Lu`*(xqc!hL~P
z-?l@LeX&x4?@04kIG3RF6<!V<N!!8$F$8D`ykRN4I79QG)5#fOm_1`}4fBfhRt$UZ
zBizzRWPCit*S9*#tu)9%DW=S?zY~lk^nPiP-M+4XFFWen!z=I5EbqOE;w@^ge@)t-
zq_5i#Jn@`J)#hwxv(2l8={!}G-1IZ5ax^*jRSCKQr;gDtXuZ!CO^&o;=5hS7_!DO^
zCE)=%FYn>i6RnKkUk=2k^SlpeINt2W?!cnoq<!NXTSd$a={X1^9s6K#{Y}S($0x9M
zKD;@)F*~68))kwucPRw`axgR4H;32jUr*aH<vS~t(7dOA)XT>fdi`lUbVje-!BUi@
zJ>!au6f1~m*Qt5Ti4q<r+Rcr(x;pK7*7G!uG92G0!;9H>NnJ^e$F&wz-&s!{8%J}Y
zqlo6kE-r=Q3f;a?TxrxU46IE=c_TF&3w_J1C~3ucdr&-SMH4Lg3f8cLl~PH}kV@0N
zn#h73!_&gU66)i?kUF(v#)pzBt@#)!NbZU_ft0^#?=inR&gf@CpkOL~SSRBLyKz3G
z){{vyQd4ehZ4Or^OO6GpqBAgHkHG-htQ~^$vQRkm{?I%NKA*orOPforry?eXr2}9}
zaNgu3$$hf$mB`X2<>d_PRy=6^h$D0cyK5$CVmJ#}pb2N!4HH1zvgodU<sgbyJ+M)A
zAhEv*8nO`@cGf4gWVJb4s?E=x-yTgEu1wRGzcC-Vs#)-1%UB76KU`wTi#>0IGjN)V
z^N$qc#LP;+z(w8YX0ExVL$cWe5No^#u*<@bf@k9!NjLr)YFkFkmYB*<Ip_>3p<!0r
z+j|nSRW2k;?xF~mI~b~|(yUsA>W$ZNq@@uW2bCd+Y}x8<-P$A<j|E2;+-d8{5~*C9
zDt>CvG2JcyMRZ*(JDba1sx6rLo;Fzpo7iwc(Avuq&BHZ5iACr!m1()d)%2`m$53K`
z>xquF=o4<-Hv`M_gXr<8H_}L;Hx=#%DC?SRWcLPW92N;KaC3LZU{My(5eH;S3QAdt
zAuM8PV`r3<4a!iyUO^40*ij&3)GYn$KqMHpnIG14sHb&(+cbD0uCB|2fRv6ZvVh3*
zhQ&FedTG2yuu?P|$i{?MH92O?^guyp`qzXVt7o-&V#>`q7Ws(7ia0nN(vC$p6atZD
z2FoUB<Nnq3;@s`**~G2xh5YdpMS^B@p~qlKHJs{G(js(Ek`q}&N=1CPzsB2*tG%Rl
zu!{Ox`R>l%<jBafxHz#W6D=Uh*$79r?lh6eI0kd{nXG-l67H1ohT4on+zR=+cV}DM
zba9-p_!Y7i0s}XlMyD?hEl=cJUNtWa=x;bVSAtVgYBS~na|N<)m5)>Zhemc_-%3}u
zTV>G1^ljy<rX7MrQ6^Pq&Yq+nXF#Y+__>1@l!~Os;C0eVyd4u>*F5bFVd=^S^fd<v
z=DSX-l?u+oW@Ev))*DPrE!bpdyF_1h1VuoQK>O5^4v&f*36dX`gu{+uRh<0sYnw%0
ziiCTk5`xnr!Z0=)s7~&CPm8wPx(^EDsIETUJOjVyTShCDtU=*mst1E5gpI%y{r*||
zgL-r|q#pG8vXe_0`1ByV-cAe@GJim`F#gZPZv0T4@bJ*L0Mem?(G9-q0>k5(hz|XO
z4HkLLF_ruJ??3jf4ijdgQ&p&px2uEZ@6Dr|_>dWc5o&pPZt-Lr5yBrjhR7ll8hYgy
z(uH4ZO%o0;%15OXckaoxxwKy`+rI=S=9jcWcp*Q%nU+kr25t6~86S9KQo#!4YQ#oZ
zl4_c3(o=}e&<~N#Sq0mt?D=t|MZFSgKCCPR+E=G-q)EwSaukE%!SfV33C!W%JuKWM
zR#OT}7))I9jmJE~`uzfGBJgfFKEPh~7bo_UR7G>TC~aP;-w~!=`me^T+0KK0?XiU!
zKL{>51x*~Adw;P`&j^OBPgx*)=_Yw|7dHo(ayqytqug)m{7|5@U!(Rn9$>U$e1e&<
zp9-$qez70oizfFxn$AQ<W<@$zhw<UVUhRt&KDe#7^H8A>Pn{T<idsYI^$bC}j69Dn
zg`+9Zh7{jwf?FGO#9IR<;!iIlWp8g;^Kk})mCw55PMYy;U?|MHeMB$qk$Li=m6;*o
zLIQhHo2{>2zl8OFcDjY=*8lZR#YM&1=RD?(F$lao<e=6aRVRCD1p5<*rnk;G<nX9!
zdfMo%LyS_(q|dtZ6yF!YcTwOZ!xxFLlhp3(;RHPr++Z=QYvuguBwh75BS%mYYj^m8
z#ia#ppFrk!8+(*<Znms>B7XV>;v;fH!!n|?6YcL@nlZP&(gw*vo8R2z()3BCT1QJA
zjl7d55(*o7`_doWKZ%CUt4eZXI|lqUHLe_La|@E;?YI>H8Cs#fcdq=BAVN056cpX0
zcwdru(|mLu*MEF!_AomeG}2gD$VWm%(31RrXIyrqzHDFr&0_d0-TdN0m_1vaUsCS=
zgnGCmv91fh*Qp8Kgm0d1&GT!oL|aAzS#0l~G;t<te;0SAz2N~SRp)Z3fYSK3WiO2A
zT<T{8)+?^puDm{X{>0_cWf9$<rFnY0D3Lt%8Hjgl^r+K(pV6WT^xSKm@eAxb>qm`n
zuJ(7XZhd?*$G20Dj)&kxmy7vi2^TF-xTiqL?@tTsTfM5orfy1c!!-jig<`<3qQafi
zbG&P^T55`$1rhnw;DB^vXuYEQw(DPHp!g<LdcAA_rJX231?W8GaQ(Nc{uC_GNS_*`
zR|d6%jL8PWBFUWAC~tDHfOX|)zl+eOX5V;CraXC8y1lfiBh#p9=T{om8i7V;x_IIb
zk8bXDa$DopufUvK;B`02f4fF;%qU%tG+HQJ!&sk^lP^z(2R+9xDT5QeI7O+s>pv?L
zrFjMeXyT7qa0)%wRK7pR{;kR`zSbSl9Zc%G-Bz|G*W90JY^57bo0}DWjh*_!T$JW&
zBbDtY!BadasLCCdkE+B+tP3dupLem!b%puFx<JYc-w}H$rLopDpc>jv>-jq7+lciW
zJ(*f!sl`-t7-4>9+FV#9<CeU<<1TrKVhHq~#%g>}md8HG`Y1VPN$u*oNU>W}@fwyK
zwaT(D;{z7%vPrWtYG)P%3MF1Qs;2tF>Bbq@`^53zx<ILt?Hib_nd6MhJIOL$Zu&b;
z$yk*em$@GDZ=A4^MnOfF#~S@2Nz4`zU7Z9Rvl#QN%6&*HF2;?PXc0lwS}m|vg}}c9
zx=%fi=xN3J*A8t5NC+3Czp1k4M@~3yxpNvQ^gjC1wS+-+{6GNm0T5GC?&Dz$kU>a&
z>6Yz7%SU<7DYQwuBXcWFGZwF;VYUYpjK6ukHccSA*$Dg2lv=EE=FQB3BD4|`jIMo`
zY84Bx80-AYXTD9)yGIhX@Zx$cV`E3DTbZ`N$Z~3yXLVn1Z{P-Bb}p_qx)uNSJ+@Fj
zq(6k2c2B^!hy*g+f@M5U`1{H^3hkuS6dPN+Q`$AO)g0Jsakq^<5*!T$@Oy_nYLEUn
z#pOoT&mN(<MYeoJfW%X$6rCcpER#wjPQ1V%8NQ`D6IR9nQA4)oEzwzL!!t5ipCvVd
z=<9r{WmCNXHN^@(wGMfONs7T8`hY>4(V=)zA)*G0aiJq5P(<}l7dE9#bjvqPTn+S9
zJvSAo%o#73B?@lh@~UKiPrwP1QvW<2>LxMC2jWe(w0iwLdE@96t7ApV+{2NNKexFh
z;@|)8ZdM-kWta!HI;pk@0Uuo6*q^dF{}BbS?WwN(ecx_#SB>4pu$v3JDA*<8E(v!@
zxJ$xa67G_4mxQ|{+$G^I33o}jOTzzGB)npot2xTCq786(gUKF0|GBly|K#33i$P!Q
z`NaBu{lC4Mt@i|?ZFd0xDIfjg#C>evF<Y10pPsUr&yQTO89(4ZDqG1>0NVlfzYen7
c@n6NcaA!3k?k!xJY!eRo=jhO`Z<4S54|verE&u=k

literal 0
HcmV?d00001

diff --git a/__snapshots__/users-header--inline.png b/__snapshots__/users-header--inline.png
index dc8b5620ff99a4cba5ddc9a5224e525e0d50fe8f..d00c83b7ae3a13c6662ff63901b3f0c5a8e21412 100644
GIT binary patch
delta 4439
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
HQwshEHbsC3

literal 9841
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

diff --git a/__snapshots__/users-header--small.png b/__snapshots__/users-header--small.png
new file mode 100644
index 0000000000000000000000000000000000000000..be59724738ab76e3bdc7eb573896e50f3ae881b6
GIT binary patch
literal 8982
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

literal 0
HcmV?d00001

diff --git a/__snapshots__/users-header.test.js.snap b/__snapshots__/users-header.test.js.snap
index 830cdec..2678965 100644
--- a/__snapshots__/users-header.test.js.snap
+++ b/__snapshots__/users-header.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Users/Header default smoke-test 1`] = `
 <div>
-  <div class="flex items-center my-2">
+  <div class="my-2 text-md flex items-center">
     <div class="avatar flex-none">
       <div class="rounded h-8 w-8">
         <img class="my-0"
@@ -11,7 +11,7 @@ exports[`Users/Header default smoke-test 1`] = `
         >
       </div>
     </div>
-    <div class="m-auto flex-auto pl-3">
+    <div class="pl-3 flex-auto m-auto">
       DanConwayDev
     </div>
   </div>
@@ -20,7 +20,7 @@ exports[`Users/Header default smoke-test 1`] = `
 
 exports[`Users/Header displayName without name smoke-test 1`] = `
 <div>
-  <div class="flex items-center my-2">
+  <div class="my-2 text-md flex items-center">
     <div class="avatar flex-none">
       <div class="rounded h-8 w-8">
         <img class="my-0"
@@ -29,7 +29,7 @@ exports[`Users/Header displayName without name smoke-test 1`] = `
         >
       </div>
     </div>
-    <div class="m-auto flex-auto pl-3">
+    <div class="pl-3 flex-auto m-auto">
       DanConwayDev
     </div>
   </div>
@@ -38,31 +38,64 @@ exports[`Users/Header displayName without name smoke-test 1`] = `
 
 exports[`Users/Header inline loading smoke-test 1`] = `
 <div class="inline-block">
-  <div class="flex items-center">
-    <div class="avatar flex-none">
-      <div class="rounded h-5 w-5 skeleton">
+  <div class="text-md inline-block align-middle">
+    <div class="avatar inline-block align-middle">
+      <div class="rounded inline-block h-5 w-5 skeleton">
+      </div>
+    </div>
+    <div class="pl-0 inline-block">
+      <div class="skeleton w-24 h-4">
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Users/Header inline small loading smoke-test 1`] = `
+<div class="inline-block">
+  <div class="text-sm inline-block align-middle">
+    <div class="avatar inline-block align-middle">
+      <div class="rounded inline-block h-3.5 w-3.5 skeleton">
       </div>
     </div>
-    <div class="m-auto flex-auto pl-1">
-      <div class="skeleton h-4 w-24">
+    <div class="pl-0 inline-block">
+      <div class="skeleton w-24 h-3">
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Users/Header inline small smoke-test 1`] = `
+<div class="inline-block">
+  <div class="text-sm inline-block align-middle">
+    <div class="avatar inline-block align-middle">
+      <div class="rounded inline-block h-3.5 w-3.5">
+        <img class="my-0"
+             src="../test-profile-image.jpg"
+             alt="DanConwayDev"
+        >
       </div>
     </div>
+    <div class="pl-0 inline-block">
+      DanConwayDev
+    </div>
   </div>
 </div>
 `;
 
 exports[`Users/Header inline smoke-test 1`] = `
 <div class="inline-block">
-  <div class="flex items-center">
-    <div class="avatar flex-none">
-      <div class="rounded h-5 w-5">
+  <div class="text-md inline-block align-middle">
+    <div class="avatar inline-block align-middle">
+      <div class="rounded inline-block h-5 w-5">
         <img class="my-0"
              src="../test-profile-image.jpg"
              alt="DanConwayDev"
         >
       </div>
     </div>
-    <div class="m-auto flex-auto pl-1">
+    <div class="pl-0 inline-block">
       DanConwayDev
     </div>
   </div>
@@ -71,13 +104,13 @@ exports[`Users/Header inline smoke-test 1`] = `
 
 exports[`Users/Header loading smoke-test 1`] = `
 <div>
-  <div class="flex items-center my-2">
+  <div class="my-2 text-md flex items-center">
     <div class="avatar flex-none">
       <div class="rounded h-8 w-8 skeleton">
       </div>
     </div>
-    <div class="m-auto flex-auto pl-3">
-      <div class="skeleton h-4 w-24">
+    <div class="pl-3 flex-auto m-auto">
+      <div class="skeleton w-24 h-4">
       </div>
     </div>
   </div>
@@ -86,7 +119,7 @@ exports[`Users/Header loading smoke-test 1`] = `
 
 exports[`Users/Header name and displayName shows name smoke-test 1`] = `
 <div>
-  <div class="flex items-center my-2">
+  <div class="my-2 text-md flex items-center">
     <div class="avatar flex-none">
       <div class="rounded h-8 w-8">
         <img class="my-0"
@@ -95,7 +128,7 @@ exports[`Users/Header name and displayName shows name smoke-test 1`] = `
         >
       </div>
     </div>
-    <div class="m-auto flex-auto pl-3">
+    <div class="pl-3 flex-auto m-auto">
       Dan
     </div>
   </div>
@@ -104,12 +137,12 @@ exports[`Users/Header name and displayName shows name smoke-test 1`] = `
 
 exports[`Users/Header no image smoke-test 1`] = `
 <div>
-  <div class="flex items-center my-2">
+  <div class="my-2 text-md flex items-center">
     <div class="avatar flex-none">
       <div class="rounded h-8 w-8 bg-neutral">
       </div>
     </div>
-    <div class="m-auto flex-auto pl-3">
+    <div class="pl-3 flex-auto m-auto">
       DanConwayDev
     </div>
   </div>
@@ -118,14 +151,32 @@ exports[`Users/Header no image smoke-test 1`] = `
 
 exports[`Users/Header not found smoke-test 1`] = `
 <div>
-  <div class="flex items-center my-2">
+  <div class="my-2 text-md flex items-center">
     <div class="avatar flex-none">
       <div class="rounded h-8 w-8 bg-neutral">
       </div>
     </div>
-    <div class="m-auto flex-auto pl-3">
+    <div class="pl-3 flex-auto m-auto">
       npub18669...
     </div>
   </div>
 </div>
 `;
+
+exports[`Users/Header small smoke-test 1`] = `
+<div>
+  <div class="my-2 text-sm flex items-center">
+    <div class="avatar flex-none">
+      <div class="rounded h-4 w-4">
+        <img class="my-0"
+             src="../test-profile-image.jpg"
+             alt="DanConwayDev"
+        >
+      </div>
+    </div>
+    <div class="pl-2 flex-auto m-auto">
+      DanConwayDev
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/lib/components/users/UserHeader.stories.svelte b/src/lib/components/users/UserHeader.stories.svelte
index fc2e3d3..865a99d 100644
--- a/src/lib/components/users/UserHeader.stories.svelte
+++ b/src/lib/components/users/UserHeader.stories.svelte
@@ -24,6 +24,16 @@
   }}
 />
 
+<Story
+  name="small"
+  args={{
+    user: {
+      ...vectors.default,
+    },
+    size: 'sm',
+  }}
+/>
+
 <Story
   name="no image"
   args={{
@@ -66,3 +76,25 @@
     inline: true,
   }}
 />
+
+<Story
+  name="inline small"
+  args={{
+    user: {
+      ...vectors.default,
+    },
+    inline: true,
+    size: 'sm',
+  }}
+/>
+
+<Story
+  name="inline small loading"
+  args={{
+    user: {
+      ...vectors.loading,
+    },
+    inline: true,
+    size: 'sm',
+  }}
+/>
diff --git a/src/lib/components/users/UserHeader.svelte b/src/lib/components/users/UserHeader.svelte
index 2f4a0e6..ed35980 100644
--- a/src/lib/components/users/UserHeader.svelte
+++ b/src/lib/components/users/UserHeader.svelte
@@ -8,19 +8,38 @@
   }
 
   export let inline = false
+  export let size: 'sm' | 'md' = 'md'
 
   $: ({ profile, loading } = user)
   $: display_name = getName(user)
 </script>
 
 <div class:inline-block={inline}>
-  <div class:my-2={!inline} class="flex items-center">
-    <div class="avatar flex-none">
+  <div
+    class:my-2={!inline}
+    class:text-sm={size === 'sm'}
+    class:text-md={size === 'md'}
+    class:inline-block={inline}
+    class:align-middle={inline}
+    class:flex={!inline}
+    class:items-center={!inline}
+  >
+    <div
+      class="avatar"
+      class:inline-block={inline}
+      class:align-middle={inline}
+      class:flex-none={!inline}
+    >
       <div
-        class:h-8={!inline}
-        class:w-8={!inline}
-        class:h-5={inline}
-        class:w-5={inline}
+        class:inline-block={inline}
+        class:h-8={!inline && size === 'md'}
+        class:w-8={!inline && size === 'md'}
+        class:h-4={!inline && size === 'sm'}
+        class:w-4={!inline && size === 'sm'}
+        class:h-5={inline && size === 'md'}
+        class:w-5={inline && size === 'md'}
+        class:h-3.5={inline && size === 'sm'}
+        class:w-3.5={inline && size === 'sm'}
         class="rounded"
         class:skeleton={!profile && loading}
         class:bg-neutral={!loading && (!profile || !profile.image)}
@@ -30,9 +49,20 @@
         {/if}
       </div>
     </div>
-    <div class:pl-3={!inline} class:pl-1={inline} class="m-auto flex-auto pl-3">
+    <div
+      class:pl-3={!inline && size === 'md'}
+      class:pl-2={!inline && size === 'sm'}
+      class:pl-0={inline}
+      class:flex-auto={!inline}
+      class:m-auto={!inline}
+      class:inline-block={inline}
+    >
       {#if loading}
-        <div class="skeleton h-4 w-24"></div>
+        <div
+          class="skeleton w-24"
+          class:h-4={size === 'md'}
+          class:h-3={size === 'sm'}
+        ></div>
       {:else}
         {display_name}
       {/if}