78077fab9d
- Replace flex attribute with flex-shrink and flex-grow style to allow elements to be resized by splitter and window resizing. - Set the max-width on collections pane to prevent it from pushing other panes outside window border - Set the min-width on window according to the size of both library and reader tabs - Use stacked layout when window width is small fix: #4669
42 lines
708 B
SCSS
42 lines
708 B
SCSS
item-pane {
|
|
flex-grow: 0;
|
|
flex-shrink: 1;
|
|
min-width: var(--width-available-item-pane, $min-width-item-pane + $width-sidenav);
|
|
min-height: $min-width-item-pane + $width-sidenav;
|
|
|
|
&[collapsed="true"] {
|
|
min-width: $width-sidenav;
|
|
min-height: $width-sidenav;
|
|
max-width: $width-sidenav;
|
|
|
|
&[view-type=note] {
|
|
min-width: 0;
|
|
width: 0px !important;
|
|
}
|
|
|
|
visibility: inherit;
|
|
|
|
&.stacked {
|
|
max-width: unset;
|
|
max-height: $width-sidenav;
|
|
|
|
&[view-type=note] {
|
|
min-height: 0;
|
|
height: 0px !important;
|
|
}
|
|
}
|
|
|
|
#zotero-item-pane-content {
|
|
visibility: collapse;
|
|
}
|
|
}
|
|
|
|
&.stacked {
|
|
flex-direction: column;
|
|
height: 0px;
|
|
|
|
#zotero-item-pane-content {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|