diff --git a/webapp/src/components/cardDetail/cardDetail.scss b/webapp/src/components/cardDetail/cardDetail.scss index 2f925bed0..ad46399a4 100644 --- a/webapp/src/components/cardDetail/cardDetail.scss +++ b/webapp/src/components/cardDetail/cardDetail.scss @@ -28,12 +28,64 @@ width: 100%; } + + + .octo-propertyvalue { + font-size: 14px; + padding: 4px 8px; + min-height: 32px; + display: flex; + + &:not(.URLProperty) { + flex-wrap: wrap; + } + + &.octo-propertyvalue--readonly { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + &:not(.readonly) { + min-width: 180px; + transition: background 100ms ease-out 0s; + cursor: pointer; + border-radius: 4px; + + &:hover { + background-color: rgba(var(--center-channel-color-rgb), 0.08); + } + } + + .MenuWrapper { + display: flex; + align-items: center; + } + } + + .ValueSelector { + padding: 4px 0; + background-color: rgba(var(--center-channel-color-rgb), 0.08); + } + + .ValueSelector__menu { + max-width: 100%; + + .value-menu-option { + justify-content: space-between; + } + + .label-container { + max-width: 90%; + } + } + .octo-propertyrow { max-width: 595px; display: flex; - align-items: center; + align-items: flex-start; margin: 6px 0; - height: 32px; + min-height: 32px; .Switch { margin-left: 8px; @@ -54,34 +106,6 @@ } } - .octo-propertyvalue { - font-size: 14px; - padding: 4px 8px; - height: 32px; - - &.octo-propertyvalue--readonly { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - &:not(.readonly) { - min-width: 180px; - transition: background 100ms ease-out 0s; - cursor: pointer; - border-radius: 4px; - - &:hover { - background-color: rgba(var(--center-channel-color-rgb), 0.08); - } - } - - .MenuWrapper { - display: flex; - align-items: center; - } - } - .Label { margin: 0 4px 0 0; } diff --git a/webapp/src/styles/main.scss b/webapp/src/styles/main.scss index cab4d4972..febb3aab8 100644 --- a/webapp/src/styles/main.scss +++ b/webapp/src/styles/main.scss @@ -135,6 +135,7 @@ html { /*-- Property list --*/ .octo-propertyvalue { + max-width: 100%; font-size: 12px; color: rgb(var(--center-channel-color-rgb)); diff --git a/webapp/src/widgets/label.scss b/webapp/src/widgets/label.scss index c85a7d719..7d74428af 100644 --- a/webapp/src/widgets/label.scss +++ b/webapp/src/widgets/label.scss @@ -2,14 +2,16 @@ display: inline-flex; align-items: center; padding: 2px 8px; - margin-right: 5px; + margin: 4px 4px 0 0; border-radius: 3px; line-height: 20px; color: rgba(var(--center-channel-color-rgb), 0.8); white-space: nowrap; text-transform: uppercase; + overflow: hidden; font-weight: 600; font-size: 13px; + max-width: 100%; &.empty { color: rgba(var(--center-channel-color-rgb), 0.4); diff --git a/webapp/src/widgets/valueSelector.tsx b/webapp/src/widgets/valueSelector.tsx index 1ada4ab21..e7e827dd2 100644 --- a/webapp/src/widgets/valueSelector.tsx +++ b/webapp/src/widgets/valueSelector.tsx @@ -174,6 +174,7 @@ function ValueSelector(props: Props): JSX.Element { /> )} className='ValueSelector' + classNamePrefix='ValueSelector' options={props.options} getOptionLabel={(o: IPropertyOption) => o.value} getOptionValue={(o: IPropertyOption) => o.id}