Seekra/frontend
3
2
Fork 0
generated from Seekra/repository-template
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Set maximum width of the search bar #42 #43

Merged
jakob.scheid merged 2 commits from feature/limit-searchbar-width into main 2026-05-10 00:50:16 +02:00
Conversation 1 Commits 2 Files Changed 2
+4 -2
2 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/search/components/Searchbar.vue
+3 -2
View File
@@ -26,14 +26,15 @@ limitations under the License.
--submit-button-padding-y: 8px; --submit-button-padding-y: 8px;
--content-height: 32px; --content-height: 32px;
--padding: 4px; --padding: 4px;
--padding-left: calc(var(--content-height) + var(--padding));
display: flex; display: flex;
align-items: center; align-items: center;
border: 1.5px solid #ccc; border: 1.5px solid #ccc;
box-shadow: 0 0px 32px rgba(69, 98, 190, 0.25); box-shadow: 0 0px 32px rgba(69, 98, 190, 0.25);
border-radius: calc(var(--content-height) * 0.5 + var(--submit-button-padding-y) + var(--padding)); border-radius: calc(var(--content-height) * 0.5 + var(--submit-button-padding-y) + var(--padding));
padding: var(--padding); padding: var(--padding);
padding-left: calc(var(--content-height) + var(--padding)); padding-left: var(--padding-left);
width: 100%; width: calc(100% - var(--padding-left));
} }
.search-wrapper input { .search-wrapper input {
src/views/SearchView.vue
+1
View File
@@ -58,5 +58,6 @@ import Searchbar from '../features/search/components/Searchbar.vue'
#search-form { #search-form {
width: 70%; width: 70%;
max-width: 624px;
} }
</style> </style>