Skip to content

[stable6.6] fix(editor): correct width of property select for narrow view #8841

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
odzhychko merged 2 commits into from
Sep 3, 2026
+19 −110
Merged

[stable6.6] fix(editor): correct width of property select for narrow view #8841

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c09ad0e
chore(editor): remove dead code
odzhychko Sep 2, 2026
de3e620
fix(editor): correct width of property select for narrow view
odzhychko Sep 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 0 additions & 80 deletions src/components/Editor/Properties/PropertyCalendarPicker.vue
View file
Open in desktop

This file was deleted.

26 changes: 14 additions & 12 deletions src/components/Editor/Properties/PropertySelect.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@
<template>
<div
v-if="display"
class="property-select"
:class="{ 'property-select--readonly': isReadOnly }">
class="property-select">
<component
:is="icon"
:title="info"
Expand All @@ -17,11 +16,12 @@
:class="{ 'property-select__icon--hidden': !showIcon }" />

<div
class="property-select__input"
:class="{ 'property-select__input--readonly': isReadOnly }">
class="property-select__input">
<!-- Ignore default margin, because we use flex gap for spacing. -->
<NcSelect
v-if="!isReadOnly"
v-model="selectedValue"
:style="{ marginBlock: 0 }"
:options="options"
:searchable="false"
:name="readableName"
Expand All @@ -31,8 +31,7 @@
:ariaLabelCombobox="readableName"
:ariaLabelListbox="readableName"
label="label" />
<!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
<div v-else>{{ selectedValue.label }}</div>
<span v-else>{{ selectedValue.label }}</span>
</div>
</div>
</template>
Expand Down Expand Up @@ -83,12 +82,15 @@ export default {
</script>

<style lang="scss" scoped>
.property-select__input {
// Makes input always use full width.
flex: auto;

.property-select {
&__input {
// 34px left and right need to be subtracted. See https://github.com/nextcloud/calendar/pull/3361
width: calc(100% - 34px - 34px);
}
display: flex;
// Makes content take full widht.
flex-direction: column;
// Centers content if it is smaller then the minimal widht.
// Relevant if readonly text is shown instead of a select.
justify-content: center;
}

</style>
9 changes: 5 additions & 4 deletions src/styles/app-full.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,12 @@
align-items: center;
gap: calc(var(--default-grid-baseline) * 4);
justify-content: flex-start;
// This is the usuall size of input and selects provided by @nextcloud/vue.
// We never want to be smaller.
min-height: var(--default-clickable-area);
}

.property-select-multiple, .property-color, .property-repeat__summary {
&__input {
width: unset !important;
flex-grow: 1;
Expand Down Expand Up @@ -382,7 +387,3 @@
textarea {
padding: 5px 12px !important;
}

.property-select__input {
height: 34px;
}
14 changes: 0 additions & 14 deletions src/views/EditFull.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -957,12 +957,6 @@ export default {
flex-direction: column;
gap: calc(var(--default-grid-baseline) * 4);

:deep(.property-select__input) {
max-width: calc(var(--total-width) * 1 / 3 - var(--column-gap) / 2 - 36px);
display: flex;
align-items: center;
}

.multiselect__tag {
padding: var(--default-grid-baseline);
border-radius: var(--border-radius-element);
Expand Down Expand Up @@ -995,10 +989,6 @@ export default {
@media screen and (max-width: 915px) {
.app-full-body__right {
width: calc(var(--total-width) * 2 / 3 - var(--column-gap) / 2) !important;

.property-select__input {
max-width: 100% !important;
}
}
}

Expand Down Expand Up @@ -1029,10 +1019,6 @@ export default {
@media screen and (max-width: 840px) {
.app-full-footer__right {
width: calc(var(--total-width) * 2 / 3 - var(--column-gap) / 2) !important;

.property-select__input {
max-width: 100% !important;
}
}
}

Expand Down
Loading