Fix clear due date x button not working

- Reduce the width of the datetime-picker-container to prevent it from hiding the clear-date (x button).
This commit is contained in:
sboursen-scinote 2023-01-10 19:45:02 +01:00
parent d5bd26a31b
commit 83378e4ade

View file

@ -8,7 +8,7 @@
.title-row { .title-row {
.header-actions { .header-actions {
&.experiment-header { &.experiment-header {
column-gap: .25em; column-gap: 0.25em;
} }
.sort-task-menu { .sort-task-menu {
@ -22,7 +22,10 @@
} }
.experiment-table-container { .experiment-table-container {
height: calc(100vh - var(--content-header-size) - var(--navbar-height) - var(--toolbar-height)); height: calc(
100vh - var(--content-header-size) - var(--navbar-height) -
var(--toolbar-height)
);
overflow: auto; overflow: auto;
} }
@ -35,7 +38,7 @@
display: flex; display: flex;
.btn { .btn {
margin-right: .25em; margin-right: 0.25em;
} }
} }
@ -47,7 +50,9 @@
.experiment-table { .experiment-table {
display: grid; display: grid;
grid-auto-rows: 3em 1px; grid-auto-rows: 3em 1px;
grid-template-columns: max-content repeat(calc(var(--columns-count)), minmax(max-content, auto)) max-content; grid-template-columns:
max-content repeat(calc(var(--columns-count)), minmax(max-content, auto))
max-content;
min-width: 100%; min-width: 100%;
.table-header-cell { .table-header-cell {
@ -56,7 +61,7 @@
border: 1px solid $color-white; border: 1px solid $color-white;
display: flex; display: flex;
height: 3em; height: 3em;
padding: 0 .5em; padding: 0 0.5em;
position: sticky; position: sticky;
position: -webkit-sticky; position: -webkit-sticky;
top: 0; top: 0;
@ -113,7 +118,7 @@
.table-body-cell { .table-body-cell {
align-items: center; align-items: center;
display: flex; display: flex;
padding: 0 .5em; padding: 0 0.5em;
.my-module-users-link { .my-module-users-link {
color: $color-silver-chalice; color: $color-silver-chalice;
@ -127,7 +132,7 @@
color: $color-silver-chalice; color: $color-silver-chalice;
height: 2em; height: 2em;
line-height: 2em; line-height: 2em;
margin-right: .25em; margin-right: 0.25em;
width: 2em; width: 2em;
} }
@ -137,7 +142,7 @@
color: $color-white; color: $color-white;
height: 2em; height: 2em;
line-height: 2em; line-height: 2em;
margin-right: .25em; margin-right: 0.25em;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
width: 2em; width: 2em;
@ -181,7 +186,7 @@
.assign-users-dropdown { .assign-users-dropdown {
.dropdown-menu { .dropdown-menu {
padding: .5em; padding: 0.5em;
width: 280px; width: 280px;
} }
@ -193,10 +198,10 @@
.user-container { .user-container {
align-items: center; align-items: center;
display: flex; display: flex;
padding: .5em; padding: 0.5em;
.user-avatar { .user-avatar {
padding: 0 .75em; padding: 0 0.75em;
&.archived { &.archived {
padding-left: 0; padding-left: 0;
@ -287,14 +292,13 @@
width: 24px; width: 24px;
} }
@keyframes placeholder-pulsing { @keyframes placeholder-pulsing {
0% { 0% {
opacity: 1; opacity: 1;
} }
50% { 50% {
opacity: .5; opacity: 0.5;
} }
100% { 100% {
@ -380,7 +384,7 @@
left: 0; left: 0;
position: absolute; position: absolute;
top: 0; top: 0;
width: 100%; width: 90%;
.calendar-due-date { .calendar-due-date {
opacity: 0; opacity: 0;
@ -388,10 +392,9 @@
} }
&:hover { &:hover {
.date-text[data-editable=true] { .date-text[data-editable="true"] {
background-color: $color-concrete; background-color: $color-concrete;
border-radius: 4px; border-radius: 4px;
} }
} }
} }
@ -420,7 +423,7 @@
align-items: center; align-items: center;
border-bottom: $border-default; border-bottom: $border-default;
display: flex; display: flex;
padding: .5em 1em; padding: 0.5em 1em;
&:not(.visible) { &:not(.visible) {
color: $color-alto; color: $color-alto;