Develop Frontend Components for Project, Package, and Instance Views

frontend/src/pages/PackagePage.css

@@ -206,6 +206,92 @@ h2 {
   color: var(--text-primary);
 }
 
+/* Section header */
+.section-header {
+  margin-bottom: 16px;
+}
+
+.section-header h2 {
+  margin-bottom: 0;
+}
+
+/* Package header stats */
+.package-header-stats {
+  display: flex;
+  gap: 20px;
+  margin-top: 12px;
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+}
+
+.stat-item strong {
+  color: var(--text-primary);
+}
+
+.stat-item strong.accent {
+  color: var(--accent-primary);
+}
+
+/* Artifact ID cell */
+.artifact-id-cell {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Copy button */
+.copy-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  cursor: pointer;
+  opacity: 0;
+  transition: all var(--transition-fast);
+}
+
+.artifact-id-cell:hover .copy-btn,
+tr:hover .copy-btn {
+  opacity: 1;
+}
+
+.copy-btn:hover {
+  background: var(--bg-hover);
+  color: var(--accent-primary);
+}
+
+/* Content type */
+.content-type {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+}
+
+/* Created cell */
+.created-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.created-by {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+}
+
+/* Cell truncate */
+.cell-truncate {
+  max-width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 /* Responsive adjustments */
 @media (max-width: 768px) {
   .upload-form {
@@ -217,11 +303,8 @@ h2 {
     min-width: 100%;
   }
 
-  .tags-table {
-    overflow-x: auto;
-  }
-
-  .tags-table table {
-    min-width: 500px;
+  .package-header-stats {
+    flex-wrap: wrap;
+    gap: 12px;
   }
 }