Skip to content

fix: Add horizontal scroll bar to views #2736

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
sriramveeraghanta merged 4 commits into from
Nov 9, 2023
Merged

fix: Add horizontal scroll bar to views #2736

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
84c989c
add errors for duplicate labels
Nov 7, 2023
976d5c2
Merge branch 'develop' of github.com:makeplane/plane into fix/update-…
rahulramesha Nov 8, 2023
13b37db
Merge branch 'develop' of github.com:makeplane/plane into fix/update-…
rahulramesha Nov 9, 2023
335346e
adding horizonatal scroll bar to views
rahulramesha Nov 9, 2023
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
2 changes: 1 addition & 1 deletion web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ export const CycleKanBanLayout: React.FC = observer(() => {
<Spinner />
</div>
) : (
<div className={`relative min-w-full w-max min-h-full h-max bg-custom-background-90 px-3`}>
<div className={`relative min-w-full min-h-full h-max bg-custom-background-90 px-3 horizontal-scroll-enable`}>
<DragDropContext onDragEnd={onDragEnd}>
{currentKanBanView === "default" ? (
<KanBan
Expand Down
2 changes: 1 addition & 1 deletion web/components/issues/issue-layouts/kanban/roots/module-root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
<Spinner />
</div>
) : (
<div className={`relative min-w-full w-max min-h-full h-max bg-custom-background-90 px-3`}>
<div className={`relative min-w-full min-h-full h-max bg-custom-background-90 px-3 horizontal-scroll-enable`}>
<DragDropContext onDragEnd={onDragEnd}>
{currentKanBanView === "default" ? (
<KanBan
Expand Down
2 changes: 1 addition & 1 deletion web/components/issues/issue-layouts/kanban/roots/project-root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ export const KanBanLayout: React.FC = observer(() => {
<Spinner />
</div>
) : (
<div className={`relative min-w-full w-max min-h-full h-max bg-custom-background-90 px-3`}>
<div className="relative min-w-full min-h-full h-max bg-custom-background-90 px-3 horizontal-scroll-enable">
<DragDropContext onDragStart={onDragStart} onDragEnd={onDragEnd}>
{currentKanBanView === "default" ? (
<KanBan
Expand Down
2 changes: 1 addition & 1 deletion web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
<div className="h-full w-full flex flex-col">
<div
ref={containerRef}
className="flex max-h-full h-full overflow-y-auto divide-x-[0.5px] divide-custom-border-200"
className="flex max-h-full h-full overflow-y-auto divide-x-[0.5px] divide-custom-border-200 horizontal-scroll-enable"
>
{issues && issues.length > 0 ? (
<>
Expand Down
12 changes: 11 additions & 1 deletion web/styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,8 @@
--color-text-300: 82, 82, 82; /* tertiary text */
--color-text-400: 163, 163, 163; /* placeholder text */

--color-scrollbar: 163, 163, 163; /* scrollbar thumb */

--color-border-100: 245, 245, 245; /* subtle border= 1 */
--color-border-200: 229, 229, 229; /* subtle border- 2 */
--color-border-300: 212, 212, 212; /* strong border- 1 */
Expand Down Expand Up @@ -117,6 +119,8 @@
--color-text-300: 82, 82, 82; /* tertiary text */
--color-text-400: 163, 163, 163; /* placeholder text */

--color-scrollbar: 163, 163, 163; /* scrollbar thumb */

--color-border-100: 245, 245, 245; /* subtle border= 1 */
--color-border-200: 229, 229, 229; /* subtle border- 2 */
--color-border-300: 212, 212, 212; /* strong border- 1 */
Expand All @@ -129,6 +133,8 @@
--color-text-300: 58, 58, 58; /* tertiary text */
--color-text-400: 115, 115, 115; /* placeholder text */

--color-scrollbar: 115, 115, 115; /* scrollbar thumb */

--color-border-100: 34, 34, 34; /* subtle border= 1 */
--color-border-200: 38, 38, 38; /* subtle border- 2 */
--color-border-300: 46, 46, 46; /* strong border- 1 */
Expand Down Expand Up @@ -160,6 +166,8 @@
--color-text-300: 115, 115, 115; /* tertiary text */
--color-text-400: 82, 82, 82; /* placeholder text */

--color-scrollbar: 82, 82, 82; /* scrollbar thumb */

--color-border-100: 34, 34, 34; /* subtle border= 1 */
--color-border-200: 38, 38, 38; /* subtle border- 2 */
--color-border-300: 46, 46, 46; /* strong border- 1 */
Expand All @@ -172,6 +180,8 @@
--color-text-300: 212, 212, 212; /* tertiary text */
--color-text-400: 115, 115, 115; /* placeholder text */

--color-scrollbar: 115, 115, 115; /* scrollbar thumb */

--color-border-100: 245, 245, 245; /* subtle border= 1 */
--color-border-200: 229, 229, 229; /* subtle border- 2 */
--color-border-300: 212, 212, 212; /* strong border- 1 */
Expand Down Expand Up @@ -256,7 +266,7 @@ body {

.horizontal-scroll-enable::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: rgba(var(--color-background-80));
background-color: rgba(var(--color-scrollbar));
}

.vertical-scroll-enable::-webkit-scrollbar {
Expand Down