DependencyTrack / DependencyTrack/frontend

API Key overview breaks on smaller screen sizes

Open
#1,295 0 comments 0 reactions 0 assignees View on GitHub
defect in triage
Dominant language
Vue
Stars
171
Forks
250
Avg merge
10h 56m
Merged PRs (30d)
84

Description

### Current Behavior

In the case of smaller screen sizes, e.g., below 1600px wide, Dependency Track's API Key overview (`"Administration -> Access Management -> Teams"`), will 'escape' from it's parent div, resulting in a visually broken page, occassionally with overlapping buttons.

The following screenshot, which features _now destroyed, local development tokens_, showcases this defect.

Image

While most screens are *likely* to be large enough to accommodate this, it is still a bit clunky when, for example, using non-fullscreened tabs.

### Steps to Reproduce

1. Start a local development environment and go through the "first time" admin login process.
2. Navigate: "Administration -> Access Management -> Teams"
3. Click the "Administrators" team.
4. Create an API key for the "Administrators" team.
5. Gradually reduce the width of the screen. My testing has shown the element overflow occurs below a width of 1600px.

If it's useful, this is the `docker compose` spec I have used to run up this reproduction instance:

```
# Docker Compose spec for Dependency Track (SCA) local development.
#
# Note: This compose spec is based *heavily* on the default upstream spec for
# *deploying* with Docker. For further details, please see:
# https://docs.dependencytrack.org/getting-started/deploy-docker/
#
services:
apiserver:
container_name: sca_api
hostname: sca.api
profiles:
- dev
depends_on:
database:
condition: service_healthy
image: dependencytrack/apiserver:latest

# `services.apiserver.environment`
#
# Please refer to the DependencyTrack docs for further configuration:
# https://docs.dependencytrack.org/getting-started/configuration/
#
environment:
ALPINE_DATABASE_MODE: "external"
ALPINE_DATABASE_URL: "jdbc:postgresql://sca.database:5432/dtrack"
ALPINE_DATABASE_DRIVER: "org.postgresql.Driver"
# Note: The default admin credentials can be found here:
# https://docs.dependencytrack.org/getting-started/initial-startup/
#
# The system requires these to be changed after initialization, so we use
# volumeMounts to preserve the changed password as it saves on time.
#
# You can 'reset' the password to default by deleting the volumes:
# docker compose --profile dev down --volumes \
# && docker compose --profile dev up
#
ALPINE_DATABASE_USERNAME: "dtrack"
ALPINE_DATABASE_PASSWORD: "dtrack"
LOGGING_LEVEL: "INFO"
# By default, DependencyTrack will assume it has 12G of RAM, so we need
# to add some JVM overrides to tune it.
#
# For more context, see:
# https://github.com/DependencyTrack/dependency-track/discussions/3553
# https://github.com/stevespringett/Alpine/issues/493
#
EXTRA_JAVA_OPTIONS: >-
-XX:MaxRAMPercentage=85.0
-XX:MaxRAM=2147483648
-XX:ActiveProcessorCount=2
ALPINE_DATANUCLEUS_CACHE_LEVEL2_TYPE: "none"
SYSTEM_REQUIREMENT_CHECK_ENABLED: "false"
volumes:
- 'dtrack-data:/data'
ports:
- "8501:8080"

frontend:
container_name: sca_frontend
hostname: sca.frontend
profiles:
- dev
image: dependencytrack/frontend:latest
depends_on:
- apiserver
environment:
API_BASE_URL: "http://localhost:8501"
ports:
- "8500:8080"

database:
container_name: sca_database
hostname: sca.database
healthcheck:
test: [ "CMD-SHELL", "pg_isready -U $${POSTGRES_USER} -d $${POSTGRES_DB}" ]
interval: 5s
timeout: 3s
retries: 3
profiles:
- dev
image: postgres:16
environment:
POSTGRES_DB: "dtrack"
POSTGRES_USER: "dtrack"
POSTGRES_PASSWORD: "dtrack"
volumes:
- "postgres-data:/var/lib/postgresql/data"

volumes:
dtrack-data: {}
postgres-data: {}

```

### Expected Behavior

Ideally, the API Key details would not escape from the parent div, allowing smaller screen sizes to more easily interact with the Dependency Track admin screens.

On that note, I've written a feature request which makes this view a bit friendlier to smaller screens.

As above, note that the following screenshots contain _now destroyed, local development API keys_.

Image

And:

Image

Asides from no longer escaping the div, the fact that the buttons aren't rendered atop each other is a good win.

I will link the feature request to this issue once published.

### Dependency-Track Frontend Version

4.13.2

### Browser

Other

### Browser Version

Issue encountered in both Chromium (Chromium 137.0.7151.119 built on Debian GNU/Linux 12 (bookworm)) and Mozilla Firefox (Mozilla Firefox 128.11.0esr))

### Operating System

Linux

### Checklist

- [x] I have read and understand the [contributing guidelines](https://github.com/DependencyTrack/dependency-track/blob/master/CONTRIBUTING.md#filing-issues)
- [x] I have checked the [existing issues](https://github.com/DependencyTrack/frontend/issues) for whether this defect was already reported

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.