From 7be8801ce9096b80db3864e8d06b7ac184e62d32 Mon Sep 17 00:00:00 2001
From: DanConwayDev <DanConwayDev@protonmail.com>
Date: Tue, 6 Feb 2024 13:40:12 +0000
Subject: [PATCH] feat(UserHeader): truncate long names

as some users and test accounts use very long names which appear poorly
---
 .../users-header--long-name-truncated.png     | Bin 0 -> 11773 bytes
 __snapshots__/users-header.test.js.snap       |  18 ++++++++++++++
 .../users/UserHeader.stories.svelte           |   9 +++++++
 src/lib/components/users/type.ts              |  22 ++++++++++++------
 src/lib/components/users/vectors.ts           |   4 ++++
 5 files changed, 46 insertions(+), 7 deletions(-)
 create mode 100644 __snapshots__/users-header--long-name-truncated.png

diff --git a/__snapshots__/users-header--long-name-truncated.png b/__snapshots__/users-header--long-name-truncated.png
new file mode 100644
index 0000000000000000000000000000000000000000..59d78b95964edf0f794438dbee1661b7cfc100f8
GIT binary patch
literal 11773
zcmeHt`&ZIw*SFP7HPh*yr|E!|G^1rRnv`ZH9;lga4G%DBXl5QJ6*5gt<RFUF9BiCY
z6Gsdcm`0NkPbHdpq;fJ(z$6|*Ian$RDyS%^AiUW80nhuxv!3^U*NXLBYhT~B_^xXo
zuD$oQKYM3<2lL$asrjd7W@g)<=g#_>nSE?puK#=UMib!^#Q`R=4(;dpjae0Mzuffl
z5&9eGh0Ug4>gLE_%*+m&LC>DKfG?UBlkU+LznALxXr3}?^_0!uT{k~Jop|^2J&~`-
z(f5WA#%)ZBe}wG$CH)IP)z!Ts`@gRU-rak5{CLFHh`2`?HxdqJwLMJlrI20BZ`jP%
z-TdT^UpMTts-xcre_8jD$BW;0UD=Zn63s^&PuYBt_GWiQEIB@`n))-FPbbnRT!%Ok
z_3C*VK~aV=v1oSlOGk-(-`dJ7?Z!u^*XWV^W}DaO$2-l|naJ<q>kqEIe(q!Tk%`>=
z;gg$duiqV8_pdej>0z_=CUW}u|K7)s=$1FgJF_8&IIXi4J+1_7>4LAf<BewU?3Xkv
zXviScjV^BcHu;A3JI%~K-w>R=dNQI{N~a?EzgZ!`G%zNFS(OV5VZyW+1<d1>M)p$7
zAJ;+jQ?5;;w>{r!-b;P4zl=%01eblJhT%z+)q$5~toG+4fe3`t`T*)Lx5VDlLS3SP
z5nsV;2O192UgumGP3cwKEpdEkZEXPo37B>0UZ{%SX>E*$7RXC@_=$czezrWfZxKI0
zR71vI4Ks>*W;U#;?)71}^|OOgEr)q+q4fB1>QcDA`wL66@~`>VNnev16xH*&6Sw^^
z9=VUjP-8~)3C%-P>M6dfuGq>=xPpU^&2d&e-1RxxsPK`WN?3xjTo(P8n=}|W6O0je
zq)2ta{}@oeH8*raf~;p$aP?#^i^>xEm?Kz7OD@tO)AV>aR8Jr16dT7i)8^391z^5}
zE~y>%M^9Jaq9hp{ia!kO%vqLbWr5jlb}6q=W6KX7xay7K9FrnnPeY4e`}AK;;uN@*
znY%@wAlQ%o>FoIquy#OBKQ@W?DBi2dMN!T2Lx{^-`=2j!5Pto_+PV07kpxgyV@-2w
zqxSCS7A+gCj8`QudK6*?uFk`rtsU<x28}lb)4RTf&v2CwP&KPU)x=W69Y4q1B*g`c
z^(YM--3MiQg@qX-<AH12{d!VvcG1y%=L68D!F8#aZO^_=@d)i{d}VP?HQ5bd80dZe
zOcXCe1=TH)ilPO%fEG*YKt->><>*YAKn;f+qicRsp~O2@YS6kJi7%RrHxw`$i{&4f
zd7(`3=Ts64Ecdy#{LR`{M<gX1!i!(0ayLH<46}yjq3FwJLM3dMmX?|6axGF>O`}O#
zv2-dS5$S}D!lF~mxpNB|D<ZLSzeAlDJR&~LUevLLZ#;!4rh4QhfuRZ*%R{{F2YHg`
z`Zb?2gY=gSnpLno%=`aZN!>J{C}&xT|MfKDl_2`0&fd_a>;Zp&qZEiq#n$bKye95!
zZKM*Z<hk~R5@8`7>CjRc?YuG>p}rO7@<kKQEuVGmFaoX>Asi6JO&h~m8KAW-MwkVu
zXJStH!SAkk=lv+SwNKvu{B@uPSsND#mrnQ4kGoVR*-NIoEAEz7zxIK%^XM|X24@ba
z-UpCMp={JOnT3m`zmCvUc&DU^5>E5*gU5a%`qK~aPYi(wKHIzQ%`{AK{lwt`GuLBZ
zKBAs5PnM78Ob>HFEeM+CwaP1kf5(}i;w>~kI^M>I<h7)P^6-w1a%#bY{IE_LkaG{{
z*5rU;Eok{Z=G?Jozi`@bRZA{p251+DkKxAi*>Pga+o?pi9TM%H<rhFbR#tylcQ&o@
zXP{9Vq#Z$_2X4jGrn!XSmvThOa%e6jdCEym-2_bLP7s#fa=P3|2G5{|NZA<Q=wGdC
z=g+3|oj(zi%1MlDP?5eNZH}OR3vwl6%8elu{d!~8n${%0TGo7W4!02I_;}qpS|HA>
zs<(_)Te_`8b$>^R+vwBj;V>qytI3`-R5W@Cgw)xnc$1Swwh&}6)?MpEmk4^ABeLL@
zkj~c|)P9IcD~y5#>!+T=fOp<mACUW0{lJwlTp85l28}tmC7+hRYa*0Zh{_!Q1MW_K
z(CL03*Cp$3FjQIFQvy~dY`cEVLrv81xxP9wDQ~!bI)$m)ZsPG~SWV}qXRPJMZKo4E
zs-7XT!j^LMGe-T5tQcS}z1F_Bh!RM*=otmMQ>6rBN==!&yJsf9L#3JNDxJW|_7!Tz
z7)5<O)fR$$=T{(;cbB?98jg1m4<gW49PX`}xXg)_&YrUvdb6s0u!-LBh8D*C*_+2B
zYb=w)BWvI?+VMuTzXf43=k6hBE4^-bxIxt@K)25?H>`TYTibA(OiVrl4S%-zrg+h4
zzRAgW>ey1Xj?k=HDw=&jqEg#}1^FI?(w?rnVQycjt{aM{`RA}%FmHY<IHG!*E82-1
zvz+lyOie*$DS+J<F;{x8T1A(zrb_60zkf4XQkC18X_ne@UHBApB<R?^pbgONA3Yn$
z2qMfKTAr-=H`Rqn+p6klf9`_rJ{rcSY)}D~P6vcy&r^=l3xyjt$oc1<#2W&XEvqt7
z)7$a3)*m&uA%(gsDx)sns7_65dr-WX)xAtI)Lni}3QIHo!0DjW&z5<djO!XGq9?OA
z_Ie$D5#AfRlymupJUOT)Ar2X3<x=mK<5({)7#@V+W^ohr#dx%E`A$uOWV%NIPshb|
zx7TUMD8s<cCy$+4M1`lm0&*tGgC478muDaA*rWFtwG@4m2&a|{m*moJYam!Zv9NI_
z7j4*;Kc;`kjD(Twn~A|ED_R`tMXk#Iscm|gVZqQXXq+l=JvP-`QG{3VxY^@bQ}I2l
zZ#_M?>pkpR6!W%W_D(ZfqlQ;>iNnQcby>{r@z+lJVf__lJ!Sx<9>Jj5G64=5o2-qG
z2}rL=UL`h+ryK8YGoIeyXtLpKH|{KUT@}mYFxHH^`G?FOtC>D>U$KC<psBdPrTfJD
zaz7EQIAE@k(hFXd(ofp>vq2HMQlzGb-mLwp7~OYX1tp~%^dEY4SPnHMk#EC`y;vS(
z*<Xu?iMrcYQ3I!)X0JmoW@dHYhNxeP@CN;K>Vi$f+pd_zwgd1IlDxlR(E->w{UZnL
z#10;=(I|t_ZPvzPfzkw2tMij1`Dsc)&~cqFNK@)zaf$Yv#zwdQD(H1z*reun{;EAB
z4X#@``jTT6&85<Upx9XHjbnzo-Nq@=3NsKHZ7da~2pk*chl1J234M{V0m1{?Drxw@
zc$w|qj*j&HhMCf-#PPhraf;)xJ!-kXVR;nT@fLJLdqEje_f-%cM&Y_GEG^iE+#n!l
zQf<pOT7PD|WF0lWr}e%K&%C3(DW2CKD828}>P&gLCzKHkSuCt3W<hsXJaq+HgwkR_
zD=m7SN_u~>Qh@Hq<VU`Jjsd`V51qmoTlQp+y#|Hk!qeslDge%Ifg#wHeZ0jx9H}rU
z?d8YvuoSc%M8z1_RufMZ-vM=^stBVKYl&qkI_ufyXYF518OKM4NC@(U&QCn+dIy~x
zbOeP@%*kG-R#34&5~a1#*@F$KS=a8${-lF-ub9kwCbifcR8p@JmuYr9RMK)zn3pNO
zMl=d;mU}Q$-oi%v2jl(A9o=TIjWK3+99J92DT+#rg>SU>3X19ccf<5uY%8vt(_yV7
zHl`%3HpadY^4tbP?&aM9PG@Z##**AgGY?P(?8Z&F5@RbI^|EFsTcKp`P^GuG(hxEA
zQOm!gYm&l4EcSYlCAOhAkg{!%oT))~t(teQBoCWHXz%q(kwgb2zoY`*7!u-|v}G9#
zVE(RrdhW;H?vQnL8>=fAd!bL#Rw-jPVcg|C44R8OmXuxtnu<3TS3nl}rUs+hI`Y+l
zHvCR9h&VBVUP;DQgwVF_38U?rU=*c5jFC=fdF~E2lv*~XUr_;>e*IH?Unt>xKx@2h
zwshfk1GfJ!H9#NmL_>6RVqne$i0bTc@h)R~PD)LNl0P%g&K{$1TphftU5=uTE+w9f
z^BM96b^Q9VW%7c6be|8u>vfr9$k<9!#x%(8){_|V+O&FcN=O_&{GAFlYtulST@W>n
z_1MN$x=c^(Fj-SyeZ6<xF~n&2Qn|VKvt&eGpS<L}qrEo7-(f;1X?~>3+b@nSd7XR+
z)H0t~T1v&i5Ac>Q#%p2?$aYi~60cQW;6CoT3M`yygSu5hGEevgB3LjSI_GPIDJ`*J
zesJWcv!bGuDPtjeM;e4O6BFNKt)g$fAm{#Y=#G6%lE3nzZs?{{t>JO(emA!*yLqsa
zuCz$P?y9F&d#X<z-GbavB9?kd|4PBx-7gHF^WHuw$Se<-NU^c&{B_(~cB_d28)BMl
zEfh8w23(W&y5uepC%Z((MVm0UW6fXH6W_H5lImNIc<-*QA##7Lrg?xh7d8T=lr8z7
zt``HVfc@T=*d&KNVc0Xgi>^-W;mU=@7O*m2a@rn0nJQsKO}-Vm;GuEuqeZsMy}72p
z%c@UV1A9tEPp;Wd{g(#${N1t~DE`f{I-?kbYAdj=K`&E-niB|0iAJ%x?fMi0&)o>J
zbiqa*F^T)T%lzE4<$+e@g?Ck3-5b9uMl~ZhkAmK&-JWmByzM?l6t<cYj{Ci!+q{Xj
z%5Vvg^~U_>PH)43)DYjIMqve7`NCtMI+(%e^Co{K@Sh<aC;F3_EdTj$>L8ps!$UcB
zuGojs>ab`iW~U5h*Tf9T%L-b`c5Iz5SCmxwKg{t!F#Qi9BJ9^Ccv`f`Wfep8+95Q$
z{pUSV%QZIYvTech83^%+)3I{e!qF~-7D6tUjBO3x)VT9Fs`{yW*wbri*op@0deM`w
zTs%DN3mO_`9T+@v8^dO}Zsu*pP{R4DpfuQS$?AA)7#2&>s5%M|QgE|G-J(leJRt45
zc!|nhDyncb)?U_^b+hNl5cx*Vty?_`Z&{J<rE8+HP;Z#bQZDokY?_}7hS0{7zbsci
zJw8>xJ!)e1;tC~%T7CJAm+mOBiWtOEyp0V>!v+*#Vm1N`7`wV<sH8S-5PN3AsNwf2
z<E<ks0m<Svz&?wv?=FcM6aDv{z#19+aX)x0)zUI~^}kXg;uEL$kT?;5eJNtXkAJMy
z0JFP&(>@ycNpUadrdU<}<15{YdC;Tq8?8p#(P&`P5rLL-AK3pY5?`Ae23Um-Merl9
z8nbHQd%fdT$_p)SfEit$a`J@-tq)<2pf%<sfoVy8539(8E0<=69Vjz}9NOZ(+_7Q6
zWsYTodc~Hr^hZ&hhMj!X3IMQxdeo0mvc(0jJf&k>za1v`^Z-yavVn_}k@p!QwreT|
zrkh)S9>R`4NC9?7IWg$Fye)bLc7VL3GF^@0m=k^P0U>#DiX)ymJ2f~ymjjyMb@O<;
zYyv0#7-o2-d)T`c#1bb9M6(RsSSB#W%B7t=@XnObigLDw5`9}wEGg<H(k3f+b3fS^
zh~jE_oiDrjJW-B+<3#KD+x_jow=<$6@mA4wO=srsof=R8J5IOPBrjD)HRZg`DG{f&
zK|-c{vsw;#uB5G1!D;mO_gr*V#x^i3W1GwNtgX{=pUzi}N^&Lbct3>v1Z!c2_=Q90
z${9i!!M%kKDRkx7khEhsHYxU$PM5{U#|)f3J54XIYV^M~wIOCJ?DFU@fS~+g!+bD+
zjv?4xPWB@cg{PLzVl`Yox#3%3&3Ktp>h*m?`6YP)<#}5<*q<(@bW(#vMonB)?5d(d
z40iDbHGyp;`L2eOCyl4Vhg<5A{R08JZ8-<MhoK(yjuF}8p3tX9gqn7KZB#c}%s+nq
z&(PswSP#Hksyy+A$wv0?1n5SR8<fRN)PUwT``W72N#i;4bhm6<u)PT9MLFuCyf-Rf
z<Cp*FF&C4!?UQynZg-aU%5U#yP#>a-5)&?Ir3~E~`m?m0_00UHcyl1o{!qPp0{+U)
zP+CcSH3)b)m0%&(c$G3i2$WTSZG`>bk~~ALeH|w!=v9w5T=iS*b>fjs4>-8Y53zGp
z&&qJ{jXmZE_u1r5PPb@uh_TbN^~(7zH492UGGUe0F!NfF$VHGSAlqh8%%G~{TsbWW
zEkn(bg~HTs;JETAKdLSLI>61?eEG>jhUmmo%MEw<oru69ie_?{_INompi=nTu6!EV
zxh;GAN!yTql({#>9w%MANC`s|+#BEhwN<j36d+CuqmbVIkowkULr|UKajeLh5|D!3
zojO}<YY{@rCZ>h7pLC~WwxMKq^Cre_RhF}F#K!R&7ZgRDkr`>%-`|$A4K-8j*fTYY
zRsF(*H#?ZLWN(rSFpZe9Ur2s#x@>E;2HSk1K3h%IxCJ#~Y|)gW{5$!4p2pE+#^9nW
zuJ(9%z;(kFyJkhUdef>lG9kr2Uih&y>3d0J?HK%ZLE$0PDt2Qi4j(&QKmYe<t<qWu
z84^N_+PyV27hM(NG^fR0v1?J6H#}Mmx8sb!57X6!2i9;FL*OyF8UCOKQC+yAQ%n)w
zZR=cUrMn7Z$KT9}<<$g#M`o#TFkf>%bH76j?vjv9t9&VhU|_vaaz@?9JK{9MlN+Bm
z!g{CUK1#I8bfY#I=O5cPDHke=eu>&~SyyeJWH{7-U;em3A-c7YnH4#abzQi$^rQ15
zNL#y0Rkts@s>c(eu5%?no)*oWwP=}<#TqA>?CI;0t|xWbQR*mWByU8q6_yw<`S%7K
zvR_4~Y~gc`cn1<s{<zQZWqw%A(fm+sC?$k|v70tk3)`b!4frn0T80}xi=NC8CC%tl
z6~Eq@XKKUfrou+Hs2xuqhIda?;fX_Fp9pE!&^F7UCrQBpl?25E$N2lL)X5j+>IZ{B
z2_ei5pifj9{^E4L*_A(`&kIBb{ZmMYFurjOL~(Ffef)H%C~e%alWE7F&kkdt9e%6a
zXVG&Mw{_e<kjw3u{od!L(get*aKDN_)r_8T1T<sCIW1Bvx%YfJRTzH~p}P)~uBAi6
znR1xhVqd3iNj^!P;kc8XR(@i;a=nPQQrPHXx%BMZGoX9D3og!ElbKnH;#cVjsKB&`
zpdeTE%bqDCBU)28KYb$~>B{ZH^p=(19mIfXB~?wu1~3h#fE~`lB@SLk`Dy_AmJ>QX
zq|+^MYh?c+4g+*Om8p_#jy3^h7(NgsAJ~U}Zr$oGUo@sA6WB{TS}DQ#*E{<s^yfEb
z(%&DJb<XRX%-}sdq5z0B`ul$V424rc;o^K@Wk8zW0h(AxmKMwv7vUGO6E7GqrmK~G
z)Hgm>2$s*;zgVyk;L}jthI?OEAGm%oUD87*dC9mgM{NS_yev4*TFSqSL)OT-7Y)?<
zX>ySx%5y+;Y?%v5%h_GERKJ{%;(s#sKv%~_7d3^Rn>VpNa*EUnntBN_DQ^UL-&E5#
zpER@Bzl!^g7Se=^;)andhmm$XdH~!!(<AL6(}`_PbY^jAfK`XytJ9r^5GfZ&7Zqw5
zniOb%(VKHtJLjsE?VQGx=e@mQgQs~<6?Yom5hH{R%g;qgf>q%hOxpX|-<R-b+|g<w
z)v?(!TZ)N@gY+E8lz!C~je0)sT@$N0y`pP3m73jueJ)lta~%(?B@2mjE`5FKxV0e$
z_jx!whxPhY<Vrk^sMCx?#75x!j4BmUT&(k}LzSv;87<LS?snGo1ysRaUbI7Khlu)Z
zr{QSw$ZPBQj#8AsT^5Lz7?ZtA>!f+G{&P%!4*27xk>5tZqobqCLkwDS34Ja6nthI%
zZ!$w&IVbr-qXcw1S*%ts$L}+wr0GRlpsZR#=^>DN{z^56f->h$UtNs!vH`?qqOOhR
z^%XbO;P~n?LC0)1gF9%@M>u1Zf9Qugy%T$XI3$<T259k@flrZT#qTljkq+ne>k_`9
z>Bp82EUToeSPMhp?HcsNmgoQk>x3UOhp0;zh#Ts?+$5c?s~8XMT~tL7>RN<r<=0SR
zl4cNbNtjP-N}tzP-JXZg@m55C=J-;Bs#~|4P8Yu7IC=72zd(c>5M5qF*v;^0Pb;%5
zTswL&Y*h--4|6(~3@|bnQEWXLZH2K$v^S~BUp2k8L-d~W!}u|~@F7tZO4uT;cQ4$Y
z{{GUkx`<D|?KwYIYNT-C246xUM&dv^&s(PP4|64!H*{;ed{+UjUU!P9nNQW;mh!t(
zJlC>MRbseGiqtlJUFOHEa;b(%D%%Brg5~98$u-xOOt4!&p1=kn#8A|gA5<4Z9y-wb
z$^?Q*tFm4nYqSKD#B*1n8;l%%H`M(-fO%xF#M8`>?K{QBg*iaoa;Cx2B`{p0%Fu_g
zEZYZFB>6E}iVOyB)4Bn<NirIYHs_(eitA0FHCFlI8iO9^f-_k#CM*;XKlU&mD^sP-
zW_C*4*VzBO^0;v4euvfZ3yX#m{!B00*R+Mci0H@@Zi{$x034CYr0*33`ZiZnVFduV
z!zdJNY6}ojT^I4RIk3F16R#+NfuSsLv`;gsxr)tEMyj>I`wMHnZ+4UH3pV3TrW{gd
zrG4d}^2#I~f_6b(5~T930U_G``*i|;72Hzi-;XiJ&|o-Z0;@52Y5U#zeQ+`N7ffEG
z2@X{BVcb63k&BFQ^(RdE&<gHmZi8$7X)Rp!jNExo^V@1PJXwCONO9}}R0G$)2d|fc
zOj!B*w#t&u`#+`K^4~OirjnE6)wI?%G|y~g&tIEQuPy%Ldr1F{Q2(i|uMcehZ#Eh~
zX#0b<|EK%l&Fg-$H4P9HuFV4ce-hz81jGNF*@q7y=|f2RpAJbM!q5k=`ruXn&%MfE
z#7>`HgUG_~aTeWLUzmpQ+CMtDR!!ag<n$WZyYuE6Id=FxCK2xQe(>(u{eRr|_`3H)
zdlCPXj~_n#pq#a{^5Nus@Q$@}@F8^k--k!rrhEg^r-k%jO>xkF!_HQH6aK^h0o7YA
A5&!@I

literal 0
HcmV?d00001

diff --git a/__snapshots__/users-header.test.js.snap b/__snapshots__/users-header.test.js.snap
index 2678965..0e15932 100644
--- a/__snapshots__/users-header.test.js.snap
+++ b/__snapshots__/users-header.test.js.snap
@@ -117,6 +117,24 @@ exports[`Users/Header loading smoke-test 1`] = `
 </div>
 `;
 
+exports[`Users/Header long name truncated smoke-test 1`] = `
+<div>
+  <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"
+             src="../test-profile-image.jpg"
+             alt="Really Really Long Lon..."
+        >
+      </div>
+    </div>
+    <div class="pl-3 flex-auto m-auto">
+      Really Really Long Lon...
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Users/Header name and displayName shows name smoke-test 1`] = `
 <div>
   <div class="my-2 text-md flex items-center">
diff --git a/src/lib/components/users/UserHeader.stories.svelte b/src/lib/components/users/UserHeader.stories.svelte
index 865a99d..55749d4 100644
--- a/src/lib/components/users/UserHeader.stories.svelte
+++ b/src/lib/components/users/UserHeader.stories.svelte
@@ -43,6 +43,15 @@
   }}
 />
 
+<Story
+  name="long name truncated"
+  args={{
+    user: {
+      ...vectors.long_name,
+    },
+  }}
+/>
+
 <Story name="loading" args={{ user: { ...vectors.loading } }} />
 
 <Story name="not found" args={{ user: { ...vectors.no_profile } }} />
diff --git a/src/lib/components/users/type.ts b/src/lib/components/users/type.ts
index 874eb04..7da72d3 100644
--- a/src/lib/components/users/type.ts
+++ b/src/lib/components/users/type.ts
@@ -13,16 +13,24 @@ export const defaults: User = {
   npub: '',
 }
 
-export function getName(user: User): string {
-  return user.profile
-    ? user.profile.name
+export function getName(user: User, truncate_above = 25): string {
+  return truncate(
+    user.profile
       ? user.profile.name
-      : user.profile.displayName
-        ? user.profile.displayName
-        : truncateNpub(user.npub)
-    : truncateNpub(user.npub)
+        ? user.profile.name
+        : user.profile.displayName
+          ? user.profile.displayName
+          : truncateNpub(user.npub)
+      : truncateNpub(user.npub),
+    truncate_above
+  )
 }
 
 function truncateNpub(npub: string): string {
   return `${npub.substring(0, 9)}...`
 }
+
+function truncate(s: string, truncate_above = 20): string {
+  if (s.length < truncate_above || truncate_above < 5) return s
+  return `${s.substring(0, truncate_above - 3)}...`
+}
diff --git a/src/lib/components/users/vectors.ts b/src/lib/components/users/vectors.ts
index e516ec7..cbbb0fe 100644
--- a/src/lib/components/users/vectors.ts
+++ b/src/lib/components/users/vectors.ts
@@ -22,6 +22,10 @@ export const UserVectors = {
   } as User,
   no_image: { ...base, profile: { name: 'DanConwayDev' } } as User,
   no_profile: { ...base } as User,
+  long_name: {
+    ...base,
+    profile: { name: 'Really Really Long Long Name', image },
+  } as User,
 }
 
 export function withName(base: User, name: string): User {