diff --git a/frontend/src/app/app.component.css b/frontend/src/app/app.component.css
index 05a64e488..3c436c2c5 100644
--- a/frontend/src/app/app.component.css
+++ b/frontend/src/app/app.component.css
@@ -139,6 +139,20 @@
.logo__image {
height: 24px;
margin-right: 12px;
+ display: block;
+ vertical-align: middle;
+}
+
+.logo picture {
+ display: inline-flex;
+ align-items: center;
+}
+
+@media (width <= 600px) {
+ .logo__image {
+ height: 28px;
+ margin-right: 8px;
+ }
}
.logo__demo-mark {
diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
index 7c57050d9..beec4e212 100644
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@@ -86,11 +86,18 @@
- ![Logo]()
+
+ ![Logo]()
+
+
+
+ 
+
+
+
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
index 476fb5894..cf303915b 100644
--- a/frontend/src/app/app.component.ts
+++ b/frontend/src/app/app.component.ts
@@ -304,7 +304,7 @@ export class AppComponent {
user_hash: res.intercom_hash,
user_id: res.id,
email: res.email,
- hide_default_launcher: window.innerWidth > 600,
+ hide_default_launcher: window.innerWidth <= 600,
});
if (this.isDemo)
diff --git a/frontend/src/app/components/connections-list/own-connections/own-connections.component.css b/frontend/src/app/components/connections-list/own-connections/own-connections.component.css
index 2304d8803..42eddc702 100644
--- a/frontend/src/app/components/connections-list/own-connections/own-connections.component.css
+++ b/frontend/src/app/components/connections-list/own-connections/own-connections.component.css
@@ -319,6 +319,10 @@
padding: 0;
}
+.connectionItem {
+ min-width: 0;
+}
+
.connection {
display: flex;
flex-direction: column;
@@ -357,6 +361,7 @@
flex-shrink: 0;
display: flex;
align-items: center;
+ min-width: 0;
gap: 12px;
background-color: var(--color-primaryPalette-500);
border-radius: 2px;
@@ -398,9 +403,14 @@
}
.connection {
+ gap: 4px;
padding: 8px;
}
+ .connection:has(.connectionSchemaButton) {
+ padding: 8px 8px 4px;
+ }
+
.connectionLogoPreview {
height: 56px;
padding: 6px 10px;
@@ -409,6 +419,7 @@
.connectionInfo .connectionInfo__connectionTitle {
font-size: 14px !important;
+ margin-bottom: -8px;
}
.connectionLogoPreview .mat-body-2 {
diff --git a/frontend/src/app/components/dashboard/dashboard.component.ts b/frontend/src/app/components/dashboard/dashboard.component.ts
index 80010533f..52bf8caaf 100644
--- a/frontend/src/app/components/dashboard/dashboard.component.ts
+++ b/frontend/src/app/components/dashboard/dashboard.component.ts
@@ -288,6 +288,8 @@ export class DashboardComponent implements OnInit, OnDestroy {
openTableFilters(structure) {
let filterDialodRef = this.dialog.open(DbTableFiltersDialogComponent, {
width: '56em',
+ panelClass: 'mobile-bottom-sheet-dialog',
+ autoFocus: false,
data: {
connectionID: this.connectionID,
tableName: this.selectedTableName,
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-filters-dialog/db-table-filters-dialog.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-filters-dialog/db-table-filters-dialog.component.css
index 1c787f894..ba76b0eab 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-filters-dialog/db-table-filters-dialog.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-filters-dialog/db-table-filters-dialog.component.css
@@ -3,6 +3,43 @@
align-items: center;
justify-content: space-between;
margin-top: 16px;
+ margin-bottom: 12px;
+}
+
+.filters-header__settings {
+ flex: 0 0 auto;
+ margin-left: auto;
+}
+
+.filters-header__text {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 2px;
+ line-height: 1.2;
+ text-align: left;
+}
+
+@media (width <= 600px) {
+ .filters-header {
+ justify-content: flex-start;
+ gap: 12px;
+ }
+
+ .filters-header__text {
+ flex: 1 1 auto;
+ }
+}
+
+.filters-header__label {
+ font-size: 18px;
+ font-weight: 600;
+}
+
+.filters-header__table {
+ font-size: 12px;
+ font-weight: 500;
+ opacity: 0.6;
}
.filters-content {
@@ -11,6 +48,11 @@
grid-column-gap: 8px;
align-content: flex-start;
align-items: flex-start;
+ padding-top: 8px !important;
+}
+
+.filters-select {
+ margin-top: 4px;
}
.filters-select {
@@ -59,6 +101,48 @@
margin-top: 4px;
}
+.filter-line ::ng-deep .mat-mdc-form-field-subscript-wrapper {
+ display: none;
+}
+
+.filter-line {
+ margin-bottom: 12px;
+}
+
+@media (width <= 600px) {
+ .filters-content {
+ grid-template-columns: 1fr 32px;
+ }
+
+ .filter-line {
+ grid-template-columns: 1fr 32px;
+ grid-template-areas:
+ "name name"
+ "field button";
+ row-gap: 2px;
+ }
+
+ .column-name {
+ grid-area: name;
+ grid-column: 1 / -1;
+ margin: 0;
+ font-size: 12px;
+ font-weight: 600;
+ opacity: 0.6;
+ }
+
+ .filter-line__field {
+ grid-area: field;
+ grid-column: 1;
+ }
+
+ .filter-delete-button {
+ grid-area: button;
+ grid-column: 2;
+ margin-top: 0;
+ }
+}
+
.settings-form__reset-button {
margin-right: auto;
}
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-filters-dialog/db-table-filters-dialog.component.html b/frontend/src/app/components/dashboard/db-table-view/db-table-filters-dialog/db-table-filters-dialog.component.html
index a24dbd802..ba75065cb 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-filters-dialog/db-table-filters-dialog.component.html
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-filters-dialog/db-table-filters-dialog.component.html
@@ -1,7 +1,11 @@
+