diff --git a/frontend/src/components/stickies.tsx b/frontend/src/components/stickies.tsx
index 20098f8..2ffb5ad 100644
--- a/frontend/src/components/stickies.tsx
+++ b/frontend/src/components/stickies.tsx
@@ -95,7 +95,7 @@ const Stickies = () => {
{score != null && (
- Cluster cohesion: {scoreLabel(score)}
+ Cluster cohesion: {scoreLabel(score)}
)}
{rankedClusters.map((group, index) => (
diff --git a/frontend/src/styles/stickies.css b/frontend/src/styles/stickies.css
index da233ce..70e3d6e 100644
--- a/frontend/src/styles/stickies.css
+++ b/frontend/src/styles/stickies.css
@@ -1,100 +1,107 @@
.stickies-grid {
- display: flex;
- flex-wrap: wrap;
- gap: 16px;
- justify-content: center;
- margin-top: 18px;
- padding: 24px;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 16px;
+ justify-content: center;
+ margin-top: 18px;
+ padding: 24px;
}
.stickies-container {
- margin: 36px 0px 36px 0px;
+ margin: 36px 0px 36px 0px;
}
.clusters-container {
- display: flex;
- flex-direction: column;
- gap: 32px;
- padding: 24px 0;
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+ padding: 24px 0;
}
.cluster-group {
- border: 1px solid #6dd6f4;
- border-radius: 8px;
- padding: 16px;
+ border: 1px solid #6dd6f4;
+ border-radius: 8px;
+ padding: 16px;
}
.cluster-draggable {
- cursor: grab;
- transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
+ cursor: grab;
+ transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.cluster-draggable:active {
- cursor: grabbing;
+ cursor: grabbing;
}
.cluster-drag-over {
- border-color: #ffb7ce;
- box-shadow: 0 0 12px rgba(255, 183, 206, 0.4);
- transform: scale(1.01);
+ border-color: #ffb7ce;
+ box-shadow: 0 0 12px rgba(255, 183, 206, 0.4);
+ transform: scale(1.01);
}
.cluster-header {
- display: flex;
- align-items: center;
- gap: 12px;
- margin-bottom: 16px;
+ position: relative;
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ margin-bottom: 16px;
+ min-height: 32px;
}
.cluster-rank {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 32px;
- height: 32px;
- border-radius: 50%;
- background: #6dd6f4;
- color: #1a1a2e;
- font-weight: 700;
- font-size: 0.95em;
- flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ background: #6dd6f4;
+ color: #1a1a2e;
+ font-weight: 700;
+ font-size: 0.95em;
+ flex-shrink: 0;
}
.cluster-reorder-hint {
- font-size: 0.8em;
- color: #9ca3af;
- font-style: italic;
- white-space: nowrap;
- flex-shrink: 0;
+ font-size: 0.8em;
+ color: #9ca3af;
+ font-style: italic;
+ white-space: nowrap;
+ flex-shrink: 0;
}
.cluster-label {
- margin: 0;
- font-size: 1.2em;
- font-weight: 600;
- flex: 1;
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ max-width: 50%;
+ margin: 0;
+ font-size: 1.2em;
+ font-weight: 600;
+ pointer-events: none;
}
.cluster-drag-handle {
- font-size: 1.4em;
- color: #6dd6f4;
- opacity: 0.4;
- user-select: none;
- transition: opacity 0.2s ease;
- flex-shrink: 0;
+ margin-left: auto;
+ font-size: 1.4em;
+ color: #6dd6f4;
+ opacity: 0.4;
+ user-select: none;
+ transition: opacity 0.2s ease;
+ flex-shrink: 0;
}
.cluster-draggable:hover .cluster-drag-handle {
- opacity: 0.8;
+ opacity: 0.8;
}
.cohesion-score {
- text-align: center;
- font-size: 0.95em;
- color: #e0e0e0;
- padding: 8px 16px;
- background: rgba(109, 214, 244, 0.1);
- border-radius: 6px;
- width: fit-content;
- margin: 0 auto;
-}
+ text-align: center;
+ font-size: 0.95em;
+ color: #e0e0e0;
+ padding: 8px 16px;
+ background: rgba(109, 214, 244, 0.1);
+ border-radius: 6px;
+ width: fit-content;
+ margin: 0 auto;
+}
\ No newline at end of file