fixing overflow on conversation header

This commit is contained in:
Roland Osborne 2022-08-22 11:38:06 -07:00
parent dfd8f0ca8d
commit 74087e3b7c
3 changed files with 18 additions and 4 deletions

View File

@ -117,15 +117,18 @@ export function Contact({ close, guid, listing }) {
{ state.init && state.display !== 'xlarge' && (
<div class="view">
<div class="title">
{ state.display === 'small' && (
<div class="close"></div>
)}
<div class="close" />
<div class="handle">{ state.handle }</div>
{ state.display === 'small' && (
<div class="close" onClick={close}>
<CloseOutlined />
</div>
)}
{ state.display !== 'small' && (
<div class="close" onClick={close}>
<RightOutlined />
</div>
)}
</div>
{ Image }
{ Details }

View File

@ -13,7 +13,9 @@ console.log(state);
<ConversationWrapper>
<div class="header">
<div class="title">
<Logo img={state.image} url={state.logo} width={32} height={32} radius={4} />
<div class="logo">
<Logo img={state.image} url={state.logo} width={32} height={32} radius={4} />
</div>
<div class="label">{ state.subject }</div>
{ state.display !== 'xlarge' && (
<div class="button" onClick={openDetails}>

View File

@ -26,9 +26,18 @@ export const ConversationWrapper = styled.div`
display: flex;
flex-direction: row;
align-items: center;
min-width: 0;
.label {
padding-left: 8px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
min-width: 0;
}
.logo {
flex-shrink: 0;
}
}